箭頭函數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 的文章後留下的隨筆感悟。