ES6函数与箭头函数

普通函数

• 函数的length属性会根据形参设置的默认值发生变化

  function test (a, b, c, d) {
    //....
  }
  console.log(test.length); // -> 4 形参的个数
  
  function test (a, b, c, d = 1) {
    //...
  }
  console.log(test.length); // -> 3
  
  function test (a = 3, b, c, d) {
    //...
  }
  console.log(test.length); // -> 0
  

• 函数的形参与 arguments 之间是映射关系，如果某个形参设置了默认值，会打破这种映射关系

  function foo (a, b, c) {
    arguments[0] = 9;
    console.log(a); // -> 9
    console.log(arguments[0]); // -> 9
  }
  foo(1, 2, 3);
  
  function bar (a = 1, b, c){
    arguments[2] = 6;
    console.log(c); // -> 3
    console.log(arguments[2]); // -> 6
  }
  bar(3, 3, 3);
  

• this指向

1. 默认绑定规则：默认指向 window，严格模式下为 undefined。

2. 隐式绑定：谁调用 this 就指向谁。

   function foo () {
     console.log(this.a);
   }
   let obj = {
     a: 3,
     foo
   }
   obj.foo(); // -> 3
   
   // var 声明的变量默认挂在window上， 所以 bar() === window.bar();
   var bar = obj.foo;
   bar(); // -> undefined
   

3. 显示绑定： call、apply 、bind。

4. new：①创建一个空对象（{}）；②设置该对象的constructor;③将创建的空对象作为this的上下文;④若无手动返回值，默认返回this 指向的这个对象。

箭头函数

• 当函数的参数只有一个时可以省略括号()；当函数的返回值只有一个表达式的情况下可以省略掉{}，和return。

  // 正常函数
  let fn = function (a) {
    return a;
  }
  // 箭头函数
  let fn = a => a;
  
  // 无参数
  let fn = () => '我是返回值'；
  
  // 多个参数
  let fn = (a, b) => a + b;
  
  // 多语句
  let fn = (a, b) => {
    var a = 1,
        b = 2;
    return a + b;
  }
  

• 箭头函数不存在 arguments

  var sum = (a, b) => {
    console.log(arguments); // 报错 ReferenceError: arguments is not defined
    return a + b;
  }
  sum(1, 2); 
  
  // 可以用...运算符来代替arguments
  // ps：函数参数中使用...运算符 必须置于参数的最后一位
  var sum = (...args) => {
    console.log(args); // -> [1, 2]
    return args[0] + args[1];
  }
  sum(1, 2);
  

• 箭头函数的this指向：箭头函数本身没有自己的 this，只能通过父级作用域来获取到this，也不能作为构造函数使用。

  function foo () {
    return (a) => {
      return this.a;
    }
  }
  let obj1 = {a: 1},
      obj2 = {a: 2};
  var bar = foo.call(obj1); // foo 函数的this -> obj1
  bar.call(obj2); // -> 1  // bar 就是箭头函数,this是根据外层的作用域来定的 所以call就失效了
  
  let person = {
    eat() {
      console.log(this);
    },
    drink: () => {
      console.log(this);
    }
  }
  person.eat();  // -> person
  person.drink(); // -> window
  

• 箭头函数的适用场景：

1. 简单的函数表达式，得出唯一的 return 返回值，函数内部无 this 引用。
2. 内部函数需要借助bind调用外部函数的this时。
3. 函数的参数操作需要用数组的方法时。

• 箭头函数的不适用场景：执行语句比较多、需要用到递归、引用函数名以及事件绑定、解绑定。