普通函数 和 箭头函数的 区别 about devnote

[wsqww]

1、语法更加简洁、清晰

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

箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

var id = 'Global';

function fun1() {
    // setTimeout中使用普通函数
    setTimeout(function(){
        console.log(this.id);
    }, 2000);
}

function fun2() {
    // setTimeout中使用箭头函数
    setTimeout(() => {
        console.log(this.id);
    }, 2000)
}

fun1.call({id: 'Obj'});     // 'Global'

fun2.call({id: 'Obj'});     // 'Obj'

3、箭头函数继承而来的this指向永远不变

箭头函数继承而来的this指向永远不变。对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};

obj.a();    // 'OBJ'
obj.b();    // 'GLOBAL'

4、.call()/.apply()/.bind()无法改变箭头函数中this的指向

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

new都做了些什么？简单来说，分为四步：

1. JS内部首先会先生成一个对象；
2. 再把函数中的this指向该对象；
3. 然后执行构造函数中的语句；
4. 最终返回该对象实例。

但是！！因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随着在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

6、箭头函数没有自己的arguments

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

7、箭头函数没有原型prototype

let sayHi = () => {
    console.log('Hello World !')
};
console.log(sayHi.prototype); // undefined

8、箭头函数不能用作Generator函数，不能使用yeild关键字

[wsqww]

不可使用箭头函数的情况

1. 调用对象的属性；this === window
2. 调用原型上的方法；this = window
3. 构造函数 不能使用 箭头函数；not a constructor
4. 动态上下文，事件监听

const button = document.getELementById('myButton');
button.addEventListener('click',()=>{
    console.log(this === window); // true
    this.innerHTML = 'click button'; // window.innerHTML
})