前言

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

一、一句話(huà)總結(jié)

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

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

三、詳細(xì)解析

更加簡(jiǎn)潔的語(yǔ)法

無(wú)參數(shù)：

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

單個(gè)參數(shù)（可省略括號(hào)）：

const square = x => x * x;

多個(gè)參數(shù)（必須加括號(hào)）：

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

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

const double = x => x * 2;

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

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

沒(méi)有自己的this

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

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

示例說(shuō)明：

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 指向新對(duì)象，輸出 undefined（因?yàn)樾聦?duì)象沒(méi)有 id）
new obj.b(); // 報(bào)錯(cuò)：Uncaught TypeError: obj.b is not a constructor

?? 結(jié)論：

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

沒(méi)有arguments對(duì)象

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

示例：

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

沒(méi)有prototype屬性

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

因?yàn)榧^函數(shù)不能作為構(gòu)造函數(shù)，自然也沒(méi)有原型屬性。

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

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

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

五、一句話(huà)總結(jié)

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

進(jìn)階建議

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

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

最新評(píng)論