箭頭函數 => 常規函數有什麼問題嗎？

普通的有什麼問題嗎？" />

如果您擴展了JavaScript 知識並想知道為什麼他們會在ECMAScript 2015 (ES6) 中添加箭頭函數，那麼您並不孤單。當我加深對這門語言及其複雜性和怪癖的了解時，我發現自己也在想同樣的事情。在這篇文章中，我將列出它的差異、優點、添加它的原因以及何時應該使用它。

我們來談談差異

在引入箭頭函數之前，必須以傳統格式宣告函數，如下所示：

function add(x, y) {
  return x + y;
}

或宣告為表達式：

const addFunction = function add(x, y) {
  return x + y;
}

引入箭頭函數，可以寫成：

const addFunction = (x,y) => x + y

簡潔的文法

從上面的例子中，我們可以很容易地看出，透過使用箭頭函數並利用其隱式返回特性，可以將函數快速重構為一行。產生的程式碼更簡潔、更清晰、更易於閱讀，讓開發更順暢、更調試更快。

吊掛

預設情況下，JavaScript 執行階段會在建立執行上下文時將所有函數和變數宣告提升到其作用域的頂部。例如，在全域範圍內，這可確保宣告的所有函數和變數可供日後呼叫的所有函數使用。但是，箭頭函數永遠不會被提升，從而可以更好地控制函數執行位置及其有權存取的變數的精確位置。

情境

每次執行 JavaScript 函數時，它都會建立一個執行上下文，其中包含有關該函數運行的環境的信息，包括 this 的值。雖然傳統函數在自己的上下文中執行，但箭頭函數將始終繼承呼叫它的函數的上下文。
使用以下程式碼：

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

我們會得到一個錯誤：Cannot read property 'forEach' of undefined，這是因為雖然printGreetings 函數位於Person 類別的上下文中並繼承了它的上下文，但forEach 函數（即使它的內建JavaScript 函數） 在其自己的上下文中運行，該上下文不包含this.name 屬性，因此會導致查找錯誤。

然而，箭頭函數永遠不會在自己的上下文中運行，並且透過使用箭頭函數重寫上面的函數...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

結果將如預期

function add(x, y) {
  return x + y;
}

概括

總結箭頭函數的好處；它們允許更短、更簡潔的程式碼；提供功能區塊程式碼的隱式返回；不會提升到執行上下文的頂部並保持其在程式碼中的確切位置；最後，它們繼承呼叫它的函數的上下文，而不執行它自己的上下文，從而允許更可預測地使用此關鍵字。

希望這篇文章可以幫助您更好地理解傳統函數與箭頭函數的區別和優點，並讓您在 JavaScript 之旅中更進一步！

進一步閱讀：
Dmitri Pavlutin 部落格 - 箭頭函數與常規函數之間的差異
MDN 參考文件 - 箭頭函數

以上是箭頭函數 => 常規函數有什麼問題嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！