讓我們深入研究壹下箭頭函數。
箭頭函數不僅僅是編寫簡潔代碼的“捷徑”。它還具有非常特殊且有用的特性。
JavaScript 充滿了我們需要編寫在其他地方執行的小函數的情況。
例如:
arr.forEach(func)
—— forEach
對每個數組元素都執行 func
。
setTimeout(func)
—— func
由內建調度器執行。
……還有更多。
JavaScript 的精髓在于創建壹個函數並將其傳遞到某個地方。
在這樣的函數中,我們通常不想離開當前上下文。這就是箭頭函數的主戰場啦。
正如我們在 對象方法,"this" 壹章中所學到的,箭頭函數沒有 this
。如果訪問 this
,則會從外部獲取。
例如,我們可以使用它在對象方法內部進行叠代:
let group = { title: "Our Group", students: ["John", "Pete", "Alice"], showList() { this.students.forEach( student => alert(this.title + ': ' + student) ); } }; group.showList();
這裏 forEach
中使用了箭頭函數,所以其中的 this.title
其實和外部方法 showList
的完全壹樣。那就是:group.title
。
如果我們使用正常的函數,則會出現錯誤:
let group = { title: "Our Group", students: ["John", "Pete", "Alice"], showList() { this.students.forEach(function(student) { // Error: Cannot read property 'title' of undefined alert(this.title + ': ' + student); }); } }; group.showList();
報錯是因爲 forEach
運行它裏面的這個函數,但是這個函數的 this
爲默認值 this=undefined
,因此就出現了嘗試訪問 undefined.title
的情況。
但箭頭函數就沒事,因爲它們沒有 this
。
不能對箭頭函數進行 new
操作
不具有 this
自然也就意味著另壹個限制:箭頭函數不能用作構造器(constructor)。不能用 new
調用它們。
箭頭函數 VS bind
箭頭函數 =>
和使用 .bind(this)
調用的常規函數之間有細微的差別:
.bind(this)
創建了壹個該函數的“綁定版本”。
箭頭函數 =>
沒有創建任何綁定。箭頭函數只是沒有 this
。this
的查找與常規變量的搜索方式完全相同:在外部詞法環境中查找。
箭頭函數也沒有 arguments
變量。
當我們需要使用當前的 this
和 arguments
轉發壹個調用時,這對裝飾器(decorators)來說非常有用。
例如,defer(f, ms)
獲得了壹個函數,並返回壹個包裝器,該包裝器將調用延遲 ms
毫秒:
function defer(f, ms) { return function() { setTimeout(() => f.apply(this, arguments), ms); }; } function sayHi(who) { alert('Hello, ' + who); } let sayHiDeferred = defer(sayHi, 2000); sayHiDeferred("John"); // 2 秒後顯示:Hello, John
不用箭頭函數的話,可以這麽寫:
function defer(f, ms) { return function(...args) { let ctx = this; setTimeout(function() { return f.apply(ctx, args); }, ms); }; }
在這裏,我們必須創建額外的變量 args
和 ctx
,以便 setTimeout
內部的函數可以獲取它們。
箭頭函數:
沒有 this
沒有 arguments
不能使用 new
進行調用
它們也沒有 super
,但目前我們還沒有學到它。我們將在 類繼承 壹章中學習它。
這是因爲,箭頭函數是針對那些沒有自己的“上下文”,但在當前上下文中起作用的短代碼的。並且箭頭函數確實在這種使用場景中大放異彩。