箭頭函數適用場景及須要注意的地方

• 箭頭函數適合於無複雜邏輯或者無反作用的純函數場景下，例如：用在 map、reduce、filter 的回調函數定義中
• 箭頭函數的亮點是簡潔，但在有多層函數嵌套的狀況下，箭頭函數反而影響了函數的做用範圍的識別度，這種狀況不建議使用箭頭函數
• 箭頭函數要實現相似純函數的效果，必須剔除外部狀態。因此箭頭函數不具有普通函數裏常見的 this、arguments 等，固然也就不能用 call()、apply()、bind() 去改變 this 的指向

• 箭頭函數不適合定義對象的方法（對象字面量方法、對象原型方法、構造器方法），由於箭頭函數沒有本身的 this，其內部的 this 指向的是外層做用域的 this

  const json = { bar: 1, fn: () => console.log(this.bar) }; json.fn(); //-> undefined // this 並非指向 json 這個對象，而是再往上到達全局做用域

  function Foo() { this.bar = 1; } Foo.prototype.fn = () => console.log(this.foo); const foo = new Foo(); foo.fn(); //-> undefined // this 並非指向 Foo，根據變量查找規則，回溯到了全局做用域

  const Message = (text) => { this.text = text; }; var helloMessage = new Message('Hello World!'); console.log(helloMessage.text); //-> Message is not a constructor // 不能夠看成構造函數，也就是說，不能夠使用 new 命令

• 箭頭函數不適合定義結合動態上下文的回調函數（事件綁定函數），由於箭頭函數在聲明的時候會綁定靜態上下文

  const button = document.querySelector('button'); button.addEventListener('click', () => { this.textContent = 'Loading...'; }); // this 並非指向預期的 button 元素，而是 window