定义一个函数

具名函数

  1. function 函数名(形式参数1, 形式参数2){
  2.     语句;
  3.     return 返回值
  4. }

匿名函数

  1. function(x, y){
  2.   return x+y;
  3. }

函数表达式

  1. let a = function(x, y){
  2.   return x+y;
  3. }

箭头函数

  1. let f1 = x => x*x
  2. let f2 = (x,y) => x+y     // 圆括号不能省
  3. let f3 = (x,y) => {
  4.     console.log(1);
  5.     return x+y
  6. }     // 花括号不能省
  7. let f4 = (x,y) => ({name:x, age: y})   //直接返回对象会出错，需要加个圆括号

用构造函数

  1. let f = new Function('x', 'y', 'return x+y')  //基本没人用，但是能让你知道函数是谁构造的

函数的要素

调用时机：函数在执行时才会调用

  • 例 1：常规顺序

    1. let a = 1;
    2. function fn(){
    3.   console.log(a)
    4. }
    5. fn()   //1

  • 例 2：赋值前调用函数 ```javascript let a = 1 function fn(){ console.log(a) } fn(); //1 a = 2

let a = 1; function fn(){ console.log(a) } a = 2; fn() //2 

  2. - 例 3：调用后使用 setTimeout 延迟执行
  3. ```javascript
  4. let a = 1
  5. function fn(){
  6.   setTimeout(()=>{
  7.       console.log(a)
  8.   },0)
  9. }
  10. fn();  
  11. a = 2   //2
  • 例 4：for 循环 与 setTimeout ```javascript let i = 0 for(i = 0; i<6; i++){ setTimeout(()=>{
    1. console.log(i)
    },0) } // 6,6,6,6,6,6 闭包，老办法：立即执行函数把i作为参数传进去

for(let i = 0; i<6; i++){ //for 循环里 let 会默认在函数将复制一个 i setTimeout(()=>{ console.log(i) },0) } // 0,1,2,3,4,5

  1. <a name="C1VkA"></a>
  2. ### 作用域：作用域是可访问变量的集合
  4. - 顶级作用域声明的变量是全局变量，window 的属性是全局变量，其他都是局部变量
  5. - 规则：如果多个作用域有同名变量 a，那么查找 a 的声明时，就向上取最近的作用域，简称「就近原则」
  7. - 例 1：函数内 let 声明的变量是局部变量，外部无法访问 
  8. ```javascript
  9. function fn(){
  10.     let a = 1
  11. }
  12. console.log(a) // a 不存在

  • 例 2：一层嵌套

    1. function f1(){
    2. let a = 1;
    3.   function f2(){
    4.     let a = 2;
    5.       console.log(a);
    6.   }
    7.   console.log(a);
    8.   a = 3;
    9.   f2()
    10. }
    11. f1()   //1  2

  • 例 3：两层嵌套

    1. function f1(){
    2.   let a = 1;
    3.   function f2(){
    4.       let a = 2;
    5.       function f3(){
    6.           console.log(a);
    7.       }
    8.   a = 22;
    9.   f3();
    10.   }
    11.   console.log(a);
    12.   a = 100;
    13.   f2();
    14. }
    15. f1()   //1 22

    闭包

  • 在函数内部，如果一个函数访问了外部变量，这个函数加变量就是闭包

    形式参数：非实际参数

  • 形参可多可少，形参只是给参数取名字 ```javascript function add(x, y){ // 其中 x 和 y 就是形参，因为并不是实际的参数 return x+y } add(1,2) // 调用 add 时，1 和 2 是实际参数，会被赋值给 x y

//形参可认为是变量声明, 上面代码近似等价于下面代码 function add(){ var x = arguments[0] var y = arguments[1] return x+y }

  1. <a name="DzRkU"></a>
  2. ### 返回值：只有函数有返回值
  3. ```javascript
  4. function hi(){ console.log('hi') }
  5. hi()  //没写 return，所以返回值是 undefined
  7. function hi(){ return console.log('hi') }
  8. hi()  //返回值为 console.log('hi') 的值，即 undefined

调用栈

  • 目的：使函数执行完后知道从哪里继续执行

  • 流程：JS 引擎在调用一个函数前，需要把函数所在的环境 push 到一个数组里（压栈），这个数组叫做调用栈，等函数执行完了，就会把环境弹(pop)出来（弹栈），然后返回到之前的环境，继续执行后续代码

  • 递归函数：递归函数的调用栈很长 ```javascript 阶乘 function f(n){ return n !== 1 ? n* f(n-1) : 1 }

f(4) //递归(先递进，再回归) = 4 f(3) = 4 (3 f(2)) = 4 (3 (2 f(1))) = 4 (3 (2 (1))) = 4 (3 (2)) = 4 (6) 24

  2. - 各浏览器调用栈长度 Chrome 12578，Firefox 26773，Node 12536
  3. - 爆栈：如果调用栈中压入的帧过多，程序就会崩溃
  4. <a name="1EHK5"></a>
  5. ### 函数提升：具名函数声明会跑到第一行
  6. ```javascript
  7. fn()          
  8. function fn(){}
  10. fn()       //fn is not defined
  11. let fn = function(){}   //函数表达式不会提升

arguments this（除了箭头函数）

  • 每个函数都有arguments 和 this，除了箭头函数，this 是隐藏参数 arguments 是普通参数

    1. function fn(x,y){
    2. console.log(arguments)
    3. console.log(this)
    4. }
    5. fn(1,2)    // [1,2] window

    如何传改变 this

    • call(this,param) this 会被自动转化成对象（JS 的糟粕）

      1. function fn(x,y){
      2. console.log(arguments)
      3. console.log(this)
      4. }
      5. fn.call(1);  //Number {1}
      6. let obj = {};
      7. fn.call(obj,123,321)  //[123,321] {}

    • apply(this,arr) 可以以数组的形式传多个值到arguments

      1. function fn(x,y){
      2. console.log(arguments)
      3. console.log(this)
      4. }
      5. let obj = {};
      6. fn.apply(obj,[1,2,3])  //[1,2,3] {}

    • bind 绑定 this

      • 一个参数

        1. function fn(x,y){
        2. console.log(this.x.y)
        3. }
        4. let f2 = fn.bind({name: 'frank'});  //f2 是 fn 绑定了 this后的新函数
        5. f2()  //等价于 fn.call({name: 'frank'})

      • 多个参数

        1. function fn(x,y){
        2. console.log(this.x.y)
        3. }
        4. let f3 = fn.bind({name: 'frank'},10);  //f3 是 fn 绑定了 this后的新函数
        5. f3()  //等价于 fn.call({name: 'frank'},10)

        箭头函数

  • 箭头函数没有自己的 arguments 和 this，因此 call 对箭头函数无效

    1. fn.call({name:'frank'}) // window

  • 箭头函数的 this、arguments 都是在定义函数时绑定外层的 this 和 arguments，如果包裹它的不是函数(直到找到最外层)则 this 指向全局对象，因为不是在执行过程中绑定的，所以不会因为调用者不同而发生变化。 ```javascript let obj = { fn(){ let a = () => {

    1. console.log(this)

    } a() } }
    obj.fn() //{fn: ƒ}

let fn = () => console.log(this) fn() // window

  1. <a name="BFWyk"></a>
  2. # 立即执行函数
  4. - 原理：ES5 时代，为了得到局部变量，必须引入一个函数，但是这个函数如果有名字，就得不偿失，所以这个函数必须是匿名函数
  5.    - 声明匿名函数，然后立即加个 () 执行它，但是 JS 标准认为这种语法不合法，所以 JS 程序员寻求各种办法
  6.    - 最终发现，只要在匿名函数前面加个运算符即可，**!、~、()、+、-** 都可以，但是这里面有些运算符会往上走，所以推荐用** ! **
  7. ```javascript
  8. consolo.log(i)     //报错 等同于 undefined(function)
  9. (function() {
  10.     var a = 1
  11. }())
  13. ! function() {    //推荐写法
  14.     var a = 1
  15. }()