JS中普通函數(shù)和箭頭函數(shù)的區(qū)別

在現(xiàn)代JavaScript開發(fā)中，函數(shù)是最基礎(chǔ)也是最重要的構(gòu)造。隨著ES6的普及，箭頭函數(shù)（Arrow Function）被廣泛使用，但普通函數(shù)（Function Declaration / Function Expression）仍然不可或缺。本文將通過對比示例，全面解析兩者的區(qū)別，并幫你理解在不同場景下如何選擇使用。

1. 語法差異

普通函數(shù)的聲明方式有兩種：

// 函數(shù)聲明
function add(a, b) {
  return a + b;
}

// 函數(shù)表達(dá)式
const multiply = function(a, b) {
  return a * b;
};

箭頭函數(shù)的寫法更加簡潔：

const add = (a, b) => a + b;
const multiply = (a, b) => {
  return a * b;
};

總結(jié)：

• 箭頭函數(shù)可以省略 function 關(guān)鍵字。
• 單行表達(dá)式可以省略大括號和 return。
• 參數(shù)只有一個時可以省略括號，如：x => x * 2。

2.this指向

這是普通函數(shù)與箭頭函數(shù)最本質(zhì)的區(qū)別。

普通函數(shù)的this

普通函數(shù)的 this 指向調(diào)用它的對象，調(diào)用方式不同，this 也不同：

const obj = {
  name: "Alice",
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // Alice

const greetFunc = obj.greet;
greetFunc(); // undefined 或 window / globalThis

箭頭函數(shù)的this

箭頭函數(shù)沒有自己的 this，它會捕獲定義時的外層 this：

const obj = {
  name: "Alice",
  greet: () => {
    console.log(this.name);
  }
};

obj.greet(); // undefined

注意：箭頭函數(shù)通常不適合作為對象方法，因為它的 this 并不指向?qū)ο蟊旧怼?/p>

3.arguments對象

普通函數(shù)可以訪問內(nèi)置的 arguments 對象：

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

sum(1, 2, 3); // 6

箭頭函數(shù)沒有自己的 arguments，需要使用 剩余參數(shù)：

const sum = (...args) => args.reduce((a, b) => a + b, 0);
sum(1, 2, 3); // 6

4. 可作為構(gòu)造函數(shù)

普通函數(shù)可以用 new 創(chuàng)建實例：

function Person(name) {
  this.name = name;
}
const p = new Person("Alice");
console.log(p.name); // Alice

箭頭函數(shù)不能作為構(gòu)造函數(shù)：

const Person = (name) => { this.name = name; };
new Person("Alice"); // TypeError: Person is not a constructor

5.prototype屬性

普通函數(shù)有 prototype，箭頭函數(shù)沒有：

function Foo() {}
console.log(Foo.prototype); // Foo {}

const Bar = () => {};
console.log(Bar.prototype); // undefined

這意味著箭頭函數(shù)不能用來定義類或傳統(tǒng)的原型方法。

6. 什么時候用箭頭函數(shù)

• 回調(diào)函數(shù)：如 map、filter、forEach 等
• 不需要 this 或 arguments 的函數(shù)
• 保持函數(shù)體簡潔，減少冗余

示例：

const nums = [1, 2, 3];
const squares = nums.map(n => n * n);
console.log(squares); // [1, 4, 9]

7. 總結(jié)對比表

8. 思考題

1. 為什么在事件監(jiān)聽中，箭頭函數(shù)可以避免 this 指向 window？

   答：普通函數(shù)是動態(tài)綁定，使用的是動態(tài)this；箭頭函數(shù)是詞法綁定，使用的是詞法this，繼承定義時外層作用域的this，可以達(dá)到保持上下文的效果。

2. 如何在箭頭函數(shù)中訪問外層函數(shù)的 arguments？

   答：構(gòu)造閉包使用外層的arguments或使用剩余參數(shù)...args。

3. 什么時候仍然必須使用普通函數(shù)而不能用箭頭函數(shù)？

   答：需要使用構(gòu)造函數(shù)、動態(tài)this以及arguments參數(shù)等情況下。

到此這篇關(guān)于JavaScript普通函數(shù)與箭頭函數(shù)區(qū)別的文章就介紹到這了,更多相關(guān)JS普通函數(shù)與箭頭函數(shù)區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論