JavaScript 箭頭函數

ES6 中引入了箭頭函數。

箭頭函數允許我們編寫更短的函數：

語法

let myFunction = (a, b) => a * b;

親自試一試

之前：

hello = function() {
  return "Hello World!";
}

親自試一試

用了箭頭函數之后：

hello = () => {
  return "Hello World!";
}

親自試一試

確實變短了！如果函數只有一個語句，并且該語句返回一個值，則可以去掉括號和 return 關鍵字：

箭頭函數默認返回值：

hello = () => "Hello World!";

親自試一試

注釋：這僅在函數只有一條語句時才有效。

如果您有參數，則將它們傳遞到括號內：

帶參數的箭頭函數：

hello = (val) => "Hello " + val;

親自試一試

事實上，如果只有一個參數，您也可以略過括號：

不帶括號的箭頭函數：

hello = val => "Hello " + val;

親自試一試

this 怎么辦？

與常規函數相比，箭頭函數對 this 的處理也有所不同。

簡而言之，使用箭頭函數沒有對 this 的綁定。

在常規函數中，關鍵字 this 表示調用該函數的對象，可以是窗口、文檔、按鈕或其他任何東西。

對于箭頭函數，this 關鍵字始終表示定義箭頭函數的對象。

讓我們看兩個例子來理解其中的差異。

這兩個例子都調用了兩次方法，第一次是在頁面加載時，第二次是在用戶單擊按鈕時。

第一個例子使用常規函數，第二個例子使用箭頭函數。

結果顯示第一個例子返回兩個不同的對象（window 和 button），第二個例子返回兩次 window 對象，因為 window 對象是函數的“所有者”。

實例

對于常規函數，this 表示調用該函數的對象：

// 常規函數：
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// window 對象調用該函數：
window.addEventListener("load", hello);
// button 對象調用該函數：
document.getElementById("btn").addEventListener("click", hello);

親自試一試

實例

用了箭頭函數，則 this 表示函數的擁有者：

// 箭頭函數：
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// window 對象調用該函數：
window.addEventListener("load", hello);
// button 對象調用該函數：
document.getElementById("btn").addEventListener("click", hello);

親自試一試

使用函數時請記住這些差異。有時，常規函數的行為正是您想要的，如果不是，請使用箭頭函數。

瀏覽器支持

下表注明了首個完全支持 JavaScript 箭頭函數的瀏覽器版本：

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
2015 年 9 月 2015 年 7 月 2013 年 5 月 2016 年 9 月 2015 年 9 月