箭头函数和与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，也就相当于不能用new调用

let myConsFunc = () => {
    console.log('888');
}

let fc = new myConsFunc();
// TypeError: myConsFunc is not a constructor

箭头函数不绑定arguments，取而代之的是Reset参数解构取得

const func = () => {
  console.log(arguments);
}
func(2,3,5,6,7,8);
// Uncaught ReferenceError: arguments is not defined

const func2 = (...rest) => {
  console.log(rest);
}
func2(2,3,5,6,7,8);
// [2, 3, 5, 6, 7, 8]

箭头函数不绑定this，会捕获其所在上下文的this的值作为自己的this

let a = 30;
let testThis = {
  a: 20,
  b: () => {
    console.log(this.a);
  },
  c: function() {
    console.log(this.a);
  }
}
testThis.b(); // undefined
testThis.c(); // 20

let a = 30;
let testThis = {
  a: 20,
  b: function() {
    const bfunc = () => {
      console.log(this.a);
    }
    return bfunc();
  },
  c: function() {
    console.log(this.a);
  }
}
testThis.b(); // 20
testThis.c(); // 20

箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对this没有影响

let testThis = {
  a: 20,
  b: function() {
    const bfunc = () => {
      console.log(this.a);
    }
    return bfunc.call({a: 60});
  },
  c: function() {
    console.log(this.a);
  }
}
testThis.b(); // 20
testThis.c(); // 20

箭头函数没有原型属性

const func = () => {
  console.log('666');
}
function func2() {
  console.log('888');
}
console.log(func.prototype);
// undefined
console.log(func2.prototype);
// {constructor: ƒ}

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

总结

• 箭头函数的this永远指向其上下文的this，任何方法都改变不了它的this指向
• 普通函数的this指向调用它的那个对象