箭头函数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 的文章后留下的随笔感悟。