ES6 箭头函数

• 多用于匿名函数的定义

箭头函数没有 prototype (原型)，箭头函数本身没有this

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined

// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

箭头函数不会创建自己的this

• 箭头函数的this指向在定义时继承自外层第一个普通函数的this

  • 被定义的时候就已经确定，之后永远不会改变

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

call | apply | bind 无法改变箭头函数中this的指向

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

箭头函数不能作为构造函数使用

• 构造函数的new

  • JS内部首先会先生成一个对象

  • 再把函数中的this指向该对象

  • 执行构造函数中的语句

  • 返回该对象实例

let Fun = (name, age) => {
    this.name = name;
    this.age = age;
};

// 报错
let p = new Fun('dingFY', 24);

箭头函数不绑定arguments，用rest参数代替arguments对象，来访问箭头函数的参数列表

• 在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值

// 普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

// rest参数...
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

箭头函数不能用作Generator函数，不能使用yield关键字

注意

• 如果形参只有一个，则小括号可以省略

• 函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；

• 不具有super

• 不具有new.target

写法

• 当有多条语句时，需要配上 {...} 和 return

  // 多参数
  const multiply = (num1, num2) => num1 * num2;
  
  // 可变参数
  const sum = (num1, num2, ...rest) => {
      let result = num1 + num2;
      for (let i = 0; i < rest.length; i++) {
          result += rest[i];
      }
      return result;
  };
  

• 如果返回的结果是对象，则需要配上 ()

  const func = val => ({ value: val });

• 不适合场景

  • 对象的方法

  • 原型的方法