箭頭函數和普通函數有什么區(qū)別?

一、語法結構的不同

普通函數使用function關鍵字聲明，后跟函數名、參數列表和函數體。而箭頭函數使用箭頭(=>)來定義函數，箭頭函數省略了function關鍵字以及函數體中的return關鍵字（在某些情況下）。

普通函數的語法結構示例：

function add(a, b) {  return a + b;}

箭頭函數的語法結構示例：

const add = (a, b) => a + b;

二、this的綁定機制不同

在普通函數中，this的值是在運行時動態(tài)確定的，它的指向取決于函數被調用的方式。而箭頭函數具有詞法作用域的特性，它會繼承外層作用域的this值，因此箭頭函數中的this指向的是定義時的作用域。

普通函數中this的綁定機制示例：

const obj = {  name: 'Alice',  greet: function() {    console.log('Hello, ' + this.name);  }};const greetFunc = obj.greet;greetFunc(); // 輸出：Hello, undefined

在上述例子中，當將obj對象中的greet方法賦值給greetFunc后，greetFunc中的this已經不再指向obj對象，而是指向全局作用域（即window對象）。因此在調用greetFunc時，this.name的值為undefined。

箭頭函數中this的綁定機制示例：

const obj = {  name: 'Alice',  greet: function() {    const greetArrow = () => {      console.log('Hello, ' + this.name);    };    greetArrow();  }};obj.greet(); // 輸出：Hello, Alice

在上述例子中，箭頭函數greetArrow繼承了外層作用域（即greet方法）的this值，所以在箭頭函數中使用this.name時，它指向的是obj對象中的name屬性。

三、arguments對象的不同

在普通函數中，可以使用arguments對象訪問傳遞給函數的所有參數。但是在箭頭函數中，arguments對象不可用，取而代之的是使用剩余參數(rest parameters)來獲取所有參數的值。

普通函數使用arguments對象示例：

function sum() {  let total = 0;  for (let i = 0; i < arguments.length; i++) {    total += arguments[i];  }  return total;}console.log(sum(1, 2, 3, 4)); // 輸出：10

箭頭函數使用剩余參數示例：

const sum = (...args) => {  let total = 0;  for (let i = 0; i < args.length; i++) {    total += args[i];  }  return total;};console.log(sum(1, 2, 3, 4)); // 輸出：10

在上述例子中，普通函數sum使用arguments對象遍歷了傳遞給函數的所有參數并計算它們的總和。而箭頭函數sum使用了剩余參數語法(…args)，將所有參數打包成一個數組args，然后可以直接對args進行遍歷和計算。

四、適用場景的不同

由于箭頭函數和普通函數具有不同的特性和行為，它們在不同的場景中有著不同的適用性。

箭頭函數適用的場景：

普通函數適用的場景：

本文逐條介紹了箭頭函數與普通函數之間的不同點，以便更好地理解它們的特性和適用場景。箭頭函數更加簡潔，省略了function關鍵字和部分語法元素，并且繼承外層作用域的this值，方便在回調函數等場景中使用。普通函數擁有更大的靈活性，可以根據運行時的情況動態(tài)確定this的值，并且可以使用arguments對象訪問所有傳遞給函數的參數。根據具體的使用場景和需求，我們可以選擇合適的函數類型來編寫代碼。

延伸閱讀1：使用箭頭函數應該注意什么

箭頭函數是JavaScript中的一種特殊函數語法，它具有簡潔的語法和特定的行為。雖然箭頭函數在許多場景下非常有用，但在使用它們時需要注意以下幾點：

一、缺乏自己的this綁定

箭頭函數沒有自己的this綁定，它會繼承外層作用域的this值。因此，在使用箭頭函數之前，確保了解當前代碼塊中的this是什么，并且這個繼承的行為是否符合預期。

二、不能作為構造函數

箭頭函數不能用作構造函數來創(chuàng)建新的對象實例。如果嘗試使用new關鍵字調用箭頭函數，會拋出一個TypeError錯誤。因此，在需要使用構造函數的情況下，請使用普通函數來確保功能的正確性。

三、不能使用arguments對象

箭頭函數沒有自己的arguments對象。它使用剩余參數語法（…args）來獲取函數的參數。如果需要在函數體內訪問所有傳遞給函數的參數，請使用剩余參數語法來替代arguments對象。

四、適用于簡短的函數體

箭頭函數適用于函數體比較簡短的情況。如果函數體較長或復雜，較好使用普通函數，以提高代碼的可讀性和可維護性。

五、無法更改this的值

由于箭頭函數沒有自己的this綁定，因此無法使用call()、apply()和bind()等方法來顯式地更改this的值。如果需要動態(tài)確定this的值，或者需要更改this，則應使用普通函數。

六、注意循環(huán)中的使用

在循環(huán)中使用箭頭函數時要格外小心。由于箭頭函數繼承外層作用域的this，在循環(huán)中可能會導致this值的意外共享。為了避免這種情況，可以使用普通函數或函數綁定來確保每個循環(huán)迭代都有獨立的this值。

七、對于對象方法的注意事項

在對象方法中使用箭頭函數時要注意，因為箭頭函數不具有自己的this綁定。如果需要在方法內部使用this來引用對象本身，請使用普通函數來確保this綁定正確。

雖然，箭頭函數具有簡潔和方便的語法，但在使用時需要注意其特定的行為和限制。了解這些注意事項可以幫助我們更好地應用箭頭函數，避免潛在的問題并確保代碼的正確性和可維護性。