前言

在 JavaScript 中，箭頭函數(shù)（Arrow Function） 是 ES6 引入的一種新的函數(shù)寫法。它不僅簡化了函數(shù)的定義方式，還在作用域綁定、this 指向等方面帶來了顯著差異。

一、一句話總結(jié)

箭頭函數(shù)比普通函數(shù)更簡潔，沒有自己的 this、arguments、prototype，也不可以作為構(gòu)造函數(shù)使用；它的 this 是詞法作用域繼承來的，一旦確定就不會改變。

二、具體區(qū)別對比表

三、詳細(xì)解析

更加簡潔的語法

無參數(shù)：

const sayHello = () => console.log('Hello');

單個參數(shù)（可省略括號）：

const square = x => x * x;

多個參數(shù)（必須加括號）：

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

返回值單行表達式（可省略{}和return）：

const double = x => x * 2;

執(zhí)行副作用語句（使用void避免隱式返回）：

const fn = () => void someFunction(); // 防止返回值污染

沒有自己的this

這是箭頭函數(shù)最核心的特點之一。

• 普通函數(shù)中的 this 是動態(tài)的，根據(jù)調(diào)用方式不同而變化；
• 箭頭函數(shù)中的 this 是詞法作用域繼承的，即定義時就決定了，不會隨調(diào)用方式改變；

示例說明：

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function() {
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};
obj.a();    // 'OBJ' （this 指向 obj）
obj.b();    // 'GLOBAL'（this 指向外層 window/global）
new obj.a(); // this 指向新對象，輸出 undefined（因為新對象沒有 id）
new obj.b(); // 報錯：Uncaught TypeError: obj.b is not a constructor

?? 結(jié)論：

• a() 是普通函數(shù)，其 this 根據(jù)調(diào)用者動態(tài)綁定；
• b() 是箭頭函數(shù)，this 指向定義時的外層上下文（全局作用域）；
• 箭頭函數(shù)不能作為構(gòu)造函數(shù)，所以不能用 new 調(diào)用；

沒有arguments對象

箭頭函數(shù)內(nèi)部無法使用 arguments，但可以通過 ...args 獲取所有參數(shù)。

示例：

const logArgs = (...args) => {
  console.log(args);
};
logArgs(1, 2, 3); // [1, 2, 3]

沒有prototype屬性

function Foo() {}
console.log(Foo.prototype); // {constructor: ...}
const Bar = () => {};
console.log(Bar.prototype); // undefined

因為箭頭函數(shù)不能作為構(gòu)造函數(shù)，自然也沒有原型屬性。

不能作為構(gòu)造函數(shù)（不可new）

const Person = () => {};
const p = new Person(); // TypeError: Person is not a constructor

四、應(yīng)用場景建議

五、一句話總結(jié)

箭頭函數(shù)是現(xiàn)代 JavaScript 中非常實用的語法糖，適合用于不需要自身 this、arguments 或構(gòu)造功能的場景。但在需要構(gòu)造函數(shù)、動態(tài) this 或訪問 arguments 的情況下，應(yīng)優(yōu)先使用普通函數(shù)。

進階建議

• 在 Vue / React 中，組件方法推薦使用箭頭函數(shù)自動綁定 this；
• 使用 TypeScript 可以幫助你更好地理解函數(shù)類型和 this 的指向；
• 使用 ESLint 規(guī)則防止誤將箭頭函數(shù)當(dāng)作構(gòu)造函數(shù)使用；
• 結(jié)合 class 使用箭頭函數(shù)字段，可以自動綁定 this（如 class MyClass { myMethod = () => {} }）；

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

最新評論