本文實例講述了JS箭頭函數和常規(guī)函數之間的區(qū)別。分享給大家供大家參考，具體如下：

在 JavaScript 中，你可以通過多種方式去定義函數。

第一種常用的方法是使用關鍵字 function：

// 函數聲明function greet(who) { return `Hello, ${who}!`;}// 函數表達式const greet = function(who) { return `Hello, ${who}`;}

代碼中的函數聲明和函數表達式被稱為“常規(guī)函數”。

從 ES2015 開始，第二種可用的方法是 箭頭函數 語法：

const greet = (who) => { return `Hello, ${who}!`;}

雖然兩者的語法都能夠定義函數，但是在開發(fā)時該怎么選擇呢？這是個好問題。

在本文中，我將展示兩者之間的主要區(qū)別，以供你能夠根據需要選擇正確的語法。

1. this 值1.1常規(guī)函數

在常規(guī) JavaScript 函數內部，this 值（即執(zhí)行上下文）是動態(tài)的。

動態(tài)上下文意味著 this 的值取決于如何調用函數。在 JavaScript 中，有 4 種調用常規(guī)函數的方式。

在簡單調用過程中，this 的值等于全局對象（如果函數在嚴格模式下運行，則為 undefined ）：

function myFunction() { console.log(this);}// 簡單調用myFunction(); // logs global object (window)

在方法調用過程中，this 的值是擁有該方法的對象：

const myObject = { method() { console.log(this); }};// 方法調用myObject.method(); // logs 'myObject'

在使用 myFunc.call(context, arg1, ..., argN) 或 myFunc.apply(context, [arg1, ..., argN]) 的間接調用中，this 的值等于第一個參數：

function myFunction() { console.log(this);}const myContext = { value: ’A’ };myFunction.call(myContext); // logs { value: ’A’ }myFunction.apply(myContext); // logs { value: ’A’ }

在使用關鍵字 new 的構造函數調用期間，this 等于新創(chuàng)建的實例：

function MyFunction() { console.log(this);}new MyFunction(); // logs an instance of MyFunction1.2箭頭函數

箭頭函數中 this 的行為與常規(guī)函數的 this 行為有很大不同。

無論如何執(zhí)行或在何處執(zhí)行，箭頭函數內部的 this 值始終等于外部函數的 this 值。換句話說，箭頭函數可按詞法解析 this，箭頭函數沒有定義自己的執(zhí)行上下文。

在以下示例中，myMethod() 是箭頭函數 callback() 的外部函數：

const myObject = { myMethod(items) { console.log(this); // logs 'myObject' const callback = () => { console.log(this); // logs 'myObject' }; items.forEach(callback); }};myObject.myMethod([1, 2, 3]);

箭頭函數 callback() 中的 this 值等于外部函數 myMethod() 的 this。

this 詞法解析是箭頭函數的重要功能之一。在方法內部使用回調時，要確保箭頭函數沒有定義自己的 this：不再有 const self = this 或者 callback.bind(this) 這種解決方法。

2.構造函數2.1 常規(guī)函數

如上一節(jié)所述，常規(guī)函數可以輕松的構造對象。

例如用 Car() 函數創(chuàng)建汽車的實例：

function Car(color) { this.color = color;}const redCar = new Car(’red’);redCar instanceof Car; // => true

Car 是常規(guī)函數，使用關鍵字 new 調用時會創(chuàng)建 Car 類型的新實例。

2.2 箭頭函數

this 詞法解決了箭頭函數不能用作構造函數。

如果你嘗試調用帶有 new 關鍵字前綴的箭頭函數，則 JavaScript 會引發(fā)錯誤：

const Car = (color) => { this.color = color;};const redCar = new Car(’red’); // TypeError: Car is not a constructor

調用 new Car(’red’)（其中 Car 是箭頭函數）會拋出 TypeError: Car is not a constructor。

3. arguments 對象3.1 常規(guī)函數

在常規(guī)函數的主體內部，arguments 是一個特殊的類似于數組的對象，其中包含被調用函數的參數列表。

讓我們用 3 個參數調用 myFunction 函數：

function myFunction() { console.log(arguments);}myFunction(’a’, ’b’); // logs { 0: ’a’, 1: ’b’}

類似于數組對象的 arguments 中包含調用參數：’a’ 和 ’b’。

3.2箭頭函數

另一方面，箭頭函數內部未定義 arguments 特殊關鍵字。

用詞法解析 arguments 對象：箭頭函數從外部函數訪問 arguments。

讓我們試著在箭頭函數內部訪問 arguments：

function myRegularFunction() { const myArrowFunction = () => { console.log(arguments); } myArrowFunction(’c’, ’d’);}myRegularFunction(’a’, ’b’); // logs { 0: ’a’, 1: ’b’ }

箭頭函數 myArrowFunction() 由參數 ’c’, ’d’ 調用。在其主體內部，arguments 對象等于調用 myRegularFunction() 的參數： ’a’, ’b’。

如果你想訪問箭頭函數的直接參數，可以使用剩余參數 ...args：

function myRegularFunction() { const myArrowFunction = (...args) => { console.log(args); } myArrowFunction(’c’, ’d’);}myRegularFunction(’a’, ’b’); // logs { 0: ’c’, 1: ’d’ }

剩余參數 ... args 接受箭頭函數的執(zhí)行參數：{ 0: ’c’, 1: ’d’ }。

4.隱式返回4.1常規(guī)函數

使用 return expression 語句從函數返回結果：

function myFunction() { return 42;}myFunction(); // => 42

如果缺少 return 語句，或者 return 語句后面沒有表達式，則常規(guī)函數隱式返回 undefined：

function myEmptyFunction() { 42;}function myEmptyFunction2() { 42; return;}myEmptyFunction(); // => undefinedmyEmptyFunction2(); // => undefined4.2箭頭函數

可以用與常規(guī)函數相同的方式從箭頭函數返回值，但有一個有用的例外。

如果箭頭函數包含一個表達式，而你省略了該函數的花括號，則將顯式返回該表達式。這些是內聯(lián)箭頭函數

const increment = (num) => num + 1;increment(41); // => 42

increment() 僅包含一個表達式：num + 1。該表達式由箭頭函數隱式返回，而無需使用 return 關鍵字。

5. 方法5.1 常規(guī)函數

常規(guī)函數是在類上定義方法的常用方式。

在下面 Hero 類中，用了常規(guī)函數定義方法 logName()：

class Hero { constructor(heroName) { this.heroName = heroName; } logName() { console.log(this.heroName); }}const batman = new Hero(’Batman’);

通常把常規(guī)函數用作方法。

有時你需要把該方法作為回調提供給 setTimeout() 或事件監(jiān)聽器。在這種情況下，你可能會很難以訪問 this 的值。

例如用 logName() 方法作為 setTimeout() 的回調：

setTimeout(batman.logName, 1000);// after 1 second logs 'undefined'

1 秒鐘后，undefined 會輸出到控制臺。 setTimeout()執(zhí)行 logName 的簡單調用（其中 this 是全局對象）。這時方法會與對象分離。

讓我們手動把 this 值綁定到正確的上下文：

setTimeout(batman.logName.bind(batman), 1000);// after 1 second logs 'Batman'

batman.logName.bind(batman) 將 this 值綁定到 batman 實例。現(xiàn)在，你可以確定該方法不會丟失上下文。

手動綁定 this 需要樣板代碼，尤其是在你有很多方法的情況下。有一種更好的方法：把箭頭函數作為類字段。

5.2 箭頭函數

感謝類字段提案（目前在第3階段），你可以將箭頭函數用作類中的方法。

與常規(guī)函數相反，現(xiàn)在用箭頭定義的方法能夠把 this 詞法綁定到類實例。

讓我們把箭頭函數作為字段：

class Hero { constructor(heroName) { this.heroName = heroName; } logName = () => { console.log(this.heroName); }}const batman = new Hero(’Batman’);

現(xiàn)在，你可以把 batman.logName 用于回調而無需手動綁定 this。 logName() 方法中 this 的值始終是類實例：

setTimeout(batman.logName, 1000);// after 1 second logs 'Batman'6. 總結

了解常規(guī)函數和箭頭函數之間的差異有助于為特定需求選擇正確的語法。

常規(guī)函數中的 this 值是動態(tài)的，并取決于調用方式。是箭頭函數中的 this 在詞法上是綁定的，等于外部函數的 this。

常規(guī)函數中的 arguments 對象包含參數列表。相反，箭頭函數未定義 arguments（但是你可以用剩余參數 ...args 輕松訪問箭頭函數參數）。

如果箭頭函數有一個表達式，則即使不用 return 關鍵字也將隱式返回該表達式。

最后一點，你可以在類內部使用箭頭函數語法定義去方法。粗箭頭方法將 this 值綁定到類實例。

不管怎樣調用胖箭頭方法，this 始終等于類實例，在回調這些方法用時非常有用。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題：《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。