Skip to content

2026-06-15

/ 10 分鐘閱讀

/ Deep JavaScript Foundations v3

箭頭函式:不是萬能替代品

本文延續命名函式表達式的討論。前一篇建立了「函式都應該有名稱」的論點,這篇要把同樣的邏輯應用到近年最受歡迎的語法特性上:箭頭函式。

箭頭函式的本質:匿名函式表達式

javascript
// 箭頭函式
var ids = people.map(person => person.id);

// 命名函式表達式(等效但有名稱)
var ids = people.map(function getId(person) {
    return person.id;
});

箭頭函式是匿名的。上一篇已經建立了為什麼匿名函式表達式是不好的選擇,箭頭函式繼承了所有相同的問題:沒有可靠的自我參考、stack trace 中顯示 anonymous、以及讀者必須閱讀函式體才能理解意圖。

person => person.id 的意圖,對某些人來說可能「看起來很明顯」,但它仍然需要推斷。相比之下,getId 這個名稱直接說明了目的,不需要讀程式碼。

「但我可以把箭頭函式賦值給變數」

有人提出折衷方案:

javascript
// 賦值給變數,得到「名稱」
var getId = person => person.id;
var ids = people.map(getId);

這確實讓 getId 出現在 stack trace 的名稱推斷中,但有一個問題:如果你已經要寫 var getId = ...,函式宣告的字元數實際上更少或相近:

javascript
// 變數 + 箭頭函式(使用 const 更多字元)
const getId = person => person.id;

// 函式宣告(更少字元,且更語意清楚)
function getId(person) { return person.id; }

而且,大多數箭頭函式的使用場景是作為 callback 直接傳入(如 .map.then),在這種情況下根本無法觸發名稱推斷,只能顯示 anonymous。

Promise 鏈中的選擇

javascript
// 箭頭函式版本(常見但有問題)
getPerson()
    .then(person => getData(person.id))
    .then(renderData);

// 命名函式表達式(改善可讀性)
getPerson()
    .then(function getDataFrom(person) {
        return getData(person.id);
    })
    .then(renderData);

// 更好:拉出來成為函式宣告,鏈本身只引用名稱
getPerson()
    .then(getDataFrom)
    .then(renderData);

Kyle Simpson 坦承他個人不喜歡 Promise 鏈的可讀性,認為它很像早年 jQuery 的風格問題。他傾向把函式拉出來作為命名宣告,讓鏈本身只是名稱的序列,不在鏈中寫任何函式定義。

箭頭函式語法的複雜度

「箭頭函式語法簡單」是個誤解。它實際上有大約 15 種不同的語法變體,圍繞括號、大括號、回傳值等細節存在大量角落案例。語法越短,角落案例就越複雜。

唯一的例外:詞彙 this

Kyle Simpson 的立場不是完全禁止箭頭函式,而是不建議把它們當作所有函式的通用替代品。他明確保留了唯一一個合理的使用場景:箭頭函式的詞彙 this 行為,這會在課程後續討論 this 關鍵字時詳細說明。

小結

箭頭函式受歡迎的主要原因是「少打字」,但更少的字元不等於更好的可讀性。作為匿名函式,它們繼承了所有匿名函式表達式的問題,且在最常見的 callback 使用場景中無法受益於名稱推斷。除了詞彙 this 這個特定用途外,函式宣告或命名函式表達式始終是更好的選擇。

複習

根據課程討論,箭頭函式的主要批評是什麼?

箭頭函式是匿名的,缺乏描述性名稱,讀者必須閱讀函式體才能理解其用途,這降低了程式碼的可讀性。

定義函式時,建議用什麼方式取代箭頭函式?

使用具有描述性名稱的函式宣告,清楚傳達函式的用途。

為什麼講師建議不要為了簡潔而使用箭頭函式?

更簡潔的程式碼不等於更易讀的程式碼,而且使用箭頭函式定義函式,尤其是搭配 const 時,實際上可能需要更多字元。

箭頭函式語法有什麼複雜性?

箭頭函式語法大約有 15 種不同的變體,可能引入複雜的角落案例。

課程討論中提到的不使用箭頭函式的唯一例外是什麼?

箭頭函式的詞彙 this 行為,這將在課程後續部分詳細討論。

小測驗

根據課程討論,什麼比使用箭頭函式更好? 使用具有描述性名稱的函式宣告
課程討論對程式碼簡潔性有什麼看法? 更簡潔的程式碼不等於更易讀的程式碼
課程中提到的箭頭函式唯一例外是什麼? 它們的詞彙 this 行為
課程討論指出在 map() 等函式呼叫中使用箭頭函式有什麼問題? 它們使理解函式用途變得更困難

此文章是 FrontendMasters 上的 Deep JavaScript Foundations, v3 課程筆記

最後更新時間:

Buy Me A Coffee

系列章節 第 41 篇 / 共 51 篇

0 %
MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog
Photo by Federica Galli on Unsplash