揭秘箭頭函式 - zishu's blog

英文地址: https://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3
通過掘金翻譯計劃活動進行翻譯

箭頭函數是函數表達式的替代方法，但在語法上有所不同，不能在所有情況下使用。如果您還沒有閱讀 JavaScript 中的函數表達式，我建議您在繼續閱讀之前先閱讀這篇文章。

現在，讓我們試著從語法、執行、作用域和提升以及代碼示例方面來理解箭頭函數。

1. 語法#

const arrowFunctionSyntax = () => {
  console.log('Hi, I am an arrow function');
};
arrowFunctionSyntax();

在上面的代碼示例中，我們可以看到箭頭函數類似於函數表達式，因為它們被賦值為變量。主要區別在於函數的編寫方式。以下是我們可以根據其語法從上述代碼中得出的觀察結果：

它不包含 function 關鍵字。
它沒有 函數名 ，這意味著這些是匿名函數。
引入了箭頭 => 符號。

const arrowFunctionWithOneParam = (number) => number + 1;
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => {
  let sum = numberOne + numberTwo;
  return sum;
};
console.log(arrowFunctionWithOneParam(5));
console.log(arrowFunctionWithMultipleParams(5, 6));

如果我們同時觀察 arrowFunctionWithOneParam 和 arrowFunctionWithMultipleParams，我們可以發現三者的不同 --- 括號 ()、塊 {} 和 return 關鍵字的使用。根據箭頭函數的語法，如果函數只接受一個參數，可以忽略括號()。如果函數只包含一條語句，則可以忽略塊{}，最後其實也可以忽略return ，如果函數只包含一個語句。

2. 執行#

const arrowFunctionExecution = () => {
  console.log('Hi, my execution is similar to normal function');
};
arrowFunctionExecution();

在執行箭頭函數時，它們的執行方式與其他普通函數的執行方式相似。當 JS 引擎執行 arrowFunctionExecution() 時，它會創建一個函數，執行上下文並被推送到調用堆棧。一旦創建了執行上下文，它就會啟動創建階段。在這個階段，它將創建參數對象並在其本地內存堆中聲明所有變量。

與普通函數相比，主要區別在於 this 的聲明。箭頭函數沒有自己的 this 變量； this 在箭頭函數中使用時會得到詞法解析。在創建階段之後不久，執行階段開始。這時它開始執行語句 console.log() ，並將 "Hi, my execution is similar to normal function" 打印到控制台。

3. 作用域#

const arrowFunctionScope = () => {
  console.log('Hi, my scoping rules works similar to function expression');
};

這些函數遵循與其他函數表達式相同的作用域規則。這些函數有自己的作用域，函數內部聲明的任何變量都不能在函數外部訪問。這些函數也不適用於 call、apply 和 bind 方法，這些方法通常依賴於作用域。如果您還沒有閱讀過 JavaScript 中的作用域，我建議您閱讀 這篇文章。

4. 提升#

amIGoingToBeHoisted();
var amIGoingToBeHoisted = () => {
  console.log('The answer is NO');
};

箭頭函數沒有被提升，因為它們也是函數表達式，其中函數被分配為變量的值。當 JavaScript 引擎執行上述代碼時，在創建階段，聲明語句 var amIGoingToBeHoisted 將被移到頂部並使用值 undefined 進行初始化，而將初始值留在後面。在執行階段，遇到語句amIGoingToBeHoisted 時會拋出類型錯誤，因為它的值是 undefined ，這不是提升後的函數類型。要了解有關 JavaScript 提升的更多信息，我建議您閱讀文章。