箭頭函數的注意事項
(1)函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象。
(2)不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤。
(3)不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。
(4)不可以使用yield命令,因此箭頭函數不能用作 Generator 函數。
上面四點中,第一點尤其值得注意。this對象的指向是可變的,但是在箭頭函數中,它是固定的。
箭頭函數適用場景
(1)箭頭函數適合於無復雜邏輯或者無副作用的純函數場景下,例如:用在 map、reduce、filter 的回調函數定義中
(2)箭頭函數的亮點是簡潔,但在有多層函數嵌套的情況下,箭頭函數反而影響了函數的作用范圍的識別度,這種情況不建議使用箭頭函數
(3)箭頭函數要實現類似純函數的效果,必須剔除外部狀態。所以箭頭函數不具備普通函數里常見的 this、arguments 等,當然也就不能用 call()、apply()、bind() 去改變 this 的指向
http://www.xihuanfan.com 手機游戲下載
(4)箭頭函數不適合定義對象的方法(對象字面量方法、對象原型方法、構造器方法),因為箭頭函數沒有自己的 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 命令
(5)箭頭函數不適合定義結合動態上下文的回調函數(事件綁定函數),因為箭頭函數在聲明的時候會綁定靜態上下文
const button = document.querySelector('button'); button.addEventListener('click', () => { this.textContent = 'Loading...'; }); // this 並不是指向預期的 button 元素,而是 window