讓我們深入研究一下箭頭函數。
箭頭函數不僅僅是編寫簡潔代碼的“捷徑”。它還具有非常特殊且有用的特性。
JavaScript 充滿了我們需要編寫在其他地方執行的小函數的情況。
例如：
- arr.forEach(func) —— forEach 對每個數組元素都執行 func。
- setTimeout(func) —— func 由內建調度器執行。
- ……還有更多。
JavaScript 的精髓在于創建一個函數并將其傳遞到某個地方。
在這樣的函數中，我們通常不想離開當前上下文。這就是箭頭函數的主戰場啦。
一、箭頭函數沒有 “this”
正如我們在 對象方法，"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”
箭頭函數也沒有 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，但目前我們還沒有學到它。我們將在 類繼承 一章中學習它。
這是因為，箭頭函數是針對那些沒有自己的“上下文”，但在當前上下文中起作用的短代碼的。并且箭頭函數確實在這種使用場景中大放異彩。
原文地址：https://www.toutiao.com/i6906591811188425219/
