箭头函数this注意事项

es6箭头函数在普通函数内部使用时，this为外部普通函数的this；

箭头函数没有this，也没有经常使用到的arguments，若是能获取到，那它必定是外部函数的arguments。

 

使用误区：

　　1.在对面里面使用箭头函数,

let a = {
  foo: 1,
  bar: () => console.log(this.foo)
}

a.bar()  //undefined

 

 　　由于对象不能造成一个做用域（我本身理解看来就是块级做用域），那么this就不是指向a这个对象，它会继续向外找具备做用域的模块，在当前案例下，this继续向外找找到了window，因此此时this为window，那么this.foo就为window.foo，若是window上没有对应变量就报错。

　　2.在原型上使用箭头函数

function A() {
  this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar()  //undefined

　　该问题其实和上一个问题同样，由于原型自己就是一个对象，那对一个对象使用箭头函数将向外查找this。

 

使用箭头函数三点建议：

1. 箭头函数适合于无复杂逻辑或者无反作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中；
2. 不要在最外层定义箭头函数，由于在函数内部操做this会很容易污染全局做用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
3. 如开头所述，箭头函数最吸引人的地方是简洁。在有多层函数嵌套的状况下，箭头函数的简洁性并无很大的提高，反而影响了函数的做用范围的识别度，这种状况不建议使用箭头函数。

 

看 https://cnodejs.org/topic/584a207a3ebad99b336b1ede 的文章后留下的随笔感悟。