」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 掌握 JavaScript 函數:普通函數與箭頭函數指南

掌握 JavaScript 函數:普通函數與箭頭函數指南

發佈於2024-11-08
瀏覽:295

Mastering JavaScript Functions: Your Guide to Normal vs. Arrow Functions

在 JavaScript 中,函數是該語言的基本構建塊,允許開發人員定義可重複使用的程式碼區塊。 JavaScript 中兩種主要的函數型別是普通函數和箭頭函數。雖然它們乍看之下似乎很相似,但它們在語法、行為和用例方面有明顯的差異。本文將逐步深入探討這些差異,提供詳細的範例並涵蓋所有場景,以幫助您有效掌握普通函數和箭頭函數之間的細微差別。

普通函數與箭頭函數:探索分歧
句法
JavaScript 中的普通函數是使用 function 關鍵字定義的,後面跟著函數名稱、參數(如果有)以及大括號內的函數體。這是一個例子:

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

另一方面,箭頭函數提供了 ES6 中引入的更簡潔的語法。它們使用箭頭 (=>) 表示法,並省略 function 關鍵字和單行函數的大括號。例如:

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

詞法綁定
普通函數和箭頭函數之間最顯著的差異之一是它們如何處理 this 關鍵字。在普通函數中,this 的值由函數的呼叫方式決定。相反,箭頭函數不會綁定自己的 this ,而是從封閉範圍繼承它。讓我們用一個例子來說明這一點:

const person = {
    name: 'John',
    sayHello: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

person.sayHello(); // Output: Hello, John!

const personArrow = {
    name: 'Jane',
    sayHello: () => {
        console.log(`Hello, ${this.name}!`);
    }
};

personArrow.sayHello(); // Output: Hello, undefined!

在上面的範例中,person.sayHello() 正確記錄「Hello, John!」因為 this 指的是 personobject。然而,personArrow.sayHello() 記錄「Hello, undefined!」因為箭頭函數沒有自己的this綁定,導致它從未定義name的全域範圍繼承this值。

參數 物件
另一個區別在於arguments 物件。普通函數可以存取argumentsobject,它是一個類似數組的對象,包含傳遞給函數的所有參數。然而,箭頭函數沒有自己的arguments物件。讓我們用 e
來說明這一點

xample:

function sum() {
    let total = 0;
    for (let i = 0; i  {
    let total = 0;
    for (let i = 0; i 



在上面的範例中,sum() 使用argumentsobject 正確計算了傳遞給它的所有參數的總和。但是,sumArrow() 會拋出 ReferenceError,因為箭頭函數無法存取參數。

關鍵字
普通函數可以用作帶有 new 關鍵字的建構子來建立物件的新實例。但是,箭頭函數不能用作建構函數。將箭頭函數與 new 一起使用將導致類型錯誤。這是一個例子:

function Person(name) {
    this.name = name;
}

const john = new Person('John');
console.log(john.name); // Output: John
const PersonArrow = (name) => {
    this.name = name;
}

const jane = new PersonArrow('Jane'); // TypeError: PersonArrow is not a constructor

常見問題部分
問:什麼時候應該使用普通函數而不是箭頭函數?
答:當需要存取 this 關鍵字、參數物件或定義建構函式時,請使用普通函數。箭頭函數更適合簡潔的單行語句或當您想要維護詞法作用域時。

問:箭頭函數可以有名字嗎?
答:不可以,箭頭函數不能有名稱。他們預設是匿名的。

問:箭頭函數比普通函數快嗎?
答:箭頭函數和普通函數沒有顯著的性能差異。它們之間的選擇應該基於它們的特定用例和可讀性。

問:我可以在物件方法中使用箭頭函數嗎?
A:是的,箭頭函數可以在物件方法中使用,但要小心,因為它們沒有綁定自己的this,這可能會導致意外的行為。

結論
總之,雖然普通函數和箭頭函數都用於在 JavaScript 中定義函數,但它們在語法、行為和用例方面有所不同。理解這些差異對於編寫乾淨、高效且無錯誤的程式碼至關重要。透過考慮本文中概述的場景,您可以就何時在 JavaScript 專案中使用每種類型的函數做出明智的決定。

請記住,沒有一刀切的解決方案,普通函數和箭頭函數之間的選擇最終取決於程式碼的特定要求和編碼風格偏好。

版本聲明 本文轉載於:https://dev.to/kafeel_ahmad/mastering-javascript-functions-your-guide-to-normal-vs-arrow-functions-2onk?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 將事件映射器與 Rimmel.js 結合使用:簡單介紹
    將事件映射器與 Rimmel.js 結合使用:簡單介紹
    如果您想提高程式碼的整體質量,您可能會想要將資料模型與底層視圖完全解耦。 功能響應式框架或UI 函式庫(如Rimmel.js)完全支援Observables,除了鮮為人知的設計之外,還可讓您將模型定義為Observable 流(例如:簡單的資料輸入、資料輸出流)模式,即事件適配器。 事件適配器可...
    程式設計 發佈於2024-11-08
  • 為什麼在 C++ 中未指定操作數的求值順序?
    為什麼在 C++ 中未指定操作數的求值順序?
    C 中操作數的求值順序在數學表達式中,操作數的求值順序通常被假定為固定的。然而,在 C 等程式語言中,計算順序可能未指定,從而導致意外結果。 考慮表達式 a b。在此表達式中,運算元 a 和 b 可以依任意順序求值。這稱為「未指定的求值順序」。 C 標準指定函數參數和各個運算子的運算元的求值順序是未...
    程式設計 發佈於2024-11-08
  • 如何將 CSV 檔案匯入到 phpMyAdmin 中的現有表中?
    如何將 CSV 檔案匯入到 phpMyAdmin 中的現有表中?
    使用現有表格列將 CSV 匯入 phpMyAdmin可以透過 phpMyAdmin 將 CSV 檔案匯入現有資料庫表。若要避免建立新表,請依照下列步驟操作:開啟 phpMyAdmin 並選擇資料庫。 按一下目標表,然後導覽至「匯入」標籤。 瀏覽並選擇要匯入的 CSV 檔案。 將導入設定配置為如下:格...
    程式設計 發佈於2024-11-08
  • 如何使用 PDO_ODBC 從 Access 正確擷取 UTF-8 重音字元?
    如何使用 PDO_ODBC 從 Access 正確擷取 UTF-8 重音字元?
    無法透過PDO_ODBC 從Access 檢索UTF-8 重音字元嘗試使用PHP ODBC(特別是透過PDO_ODBC)從Access 資料庫擷取資料時,非標準字元可能無法正確匯入,並可能導致諸如在特殊字元處顯示問號之類的問題。 了解問題該問題源於這樣一個事實:Access ODBC 驅動程式不會以...
    程式設計 發佈於2024-11-08
  • 如何使用 jQuery 偵測鍵盤 Enter 按下:綜合指南
    如何使用 jQuery 偵測鍵盤 Enter 按下:綜合指南
    使用 jQuery 檢測鍵盤 Enter 按下:綜合指南檢測使用者輸入對於建立互動式 Web 應用程式至關重要。一項常見任務是捕捉 Enter 按鍵。本文探討如何使用 jQuery 無縫地實現這一點,並解決了瀏覽器相容性的問題。 jQuery 解決方案jQuery 提供了一個名為 keypress(...
    程式設計 發佈於2024-11-08
  • 字串與字串
    字串與字串
    細繩 小寫字串是JavaScript中的原始資料型別。 用這種類型建立的字串不是對象,但 JavaScript 會自動用 String 物件包裝它們(這稱為「裝箱」)。 let imAString = "hello"; console.log(typeof imAString)...
    程式設計 發佈於2024-11-08
  • 如何在 C++ 和 Python 中右對齊輸出字串?
    如何在 C++ 和 Python 中右對齊輸出字串?
    右對齊格式化輸出字串處理文字檔案時,一致地對齊資料可以增強可讀性和分析能力。在 C 中,出現了一個問題:如何才能格式化右對齊的輸出字串? 使用Python 的格式化語法,解決方案很簡單:line_new = '{:>12} {:>12} {:>12}'....
    程式設計 發佈於2024-11-08
  • 黑客啤酒節第二週
    黑客啤酒節第二週
    第二週,我必須花更少的時間尋找問題。這次是 Mattermost 文件網站在深色模式下發生的錯誤,其中特定按鈕的顏色不正確。 我知道 Docusaurus,因為我看過其他文件和基於它構建的一些課程材料網站。它在底層使用了 React,所以我很熟悉它。但這個文檔網站是用 Python 寫的。雖然我不...
    程式設計 發佈於2024-11-08
  • Python 中的 Try/Except 與 If/Else:哪種方法比較有效?
    Python 中的 Try/Except 與 If/Else:哪種方法比較有效?
    Try/Except 與 If/Else:哪一種方法較可取? 在 Python 中處理異常時,開發人員經常面臨困境是否測試有效性或嘗試某項操作並處理任何產生的異常。本文深入探討了每種方法的細微差別,為決策提供指導和範例。 嘗試/除外:擁抱例外根據 PEP 20,錯誤除非明確地保持沉默,否則絕不應悄無...
    程式設計 發佈於2024-11-08
  • Git 遠端分支
    Git 遠端分支
    本週我們必須在另一個人的儲存庫中添加一個功能。具體來說,我們需要在使用者的 $HOME 資料夾中新增一個預設配置 TOML 文件,其中包含 CLI 工具的預設參數。我已為 readMeMaker 儲存庫做出了貢獻: https://github.com/jadorotan/readMeMaker.g...
    程式設計 發佈於2024-11-08
  • 對於簡單的操作,流總是比傳統集合慢嗎?
    對於簡單的操作,流總是比傳統集合慢嗎?
    Java 8 流性能對比傳統集合您最近涉足Java 8 並進行了非正式基準測試,以將其Stream API 與經典集合的表現進行比較。您的測試涉及過濾整數列表、提取偶數的平方根並將結果儲存在 Double 列表中。然而,您質疑測試的有效性,並渴望澄清真正的效能影響。 評估基準測試您的初步結果,表明流...
    程式設計 發佈於2024-11-08
  • 語言 API,允許您添加您的母語。
    語言 API,允許您添加您的母語。
    早在2016 年4 月,我就有了為一個我非常喜歡的部落“Igede Language”創建一個字典項目的想法,我決定將其稱為“Igede Dictionary ”,儘管我不是“ t 是母語人士。 這讓我撰寫並翻譯了 5,000 多個單詞,從 Igede 語言翻譯成英語。毫無疑問,這是我曾經研究過或擁...
    程式設計 發佈於2024-11-08
  • 使用 Playwright、TypeScript 和 JavaScript 進行自動化
    使用 Playwright、TypeScript 和 JavaScript 進行自動化
    剧作家与 TypeScript | JavaScript 安装 Playwright 是 Microsoft 与 Puppeteer 团队合作推出的基于 Web 的现代 API 自动化工具,Puppeteer 是一个 JavaScript 库,它提供高级 API 来通过 DevTools 协议或 W...
    程式設計 發佈於2024-11-08
  • Python 中的整數有幾個位元?
    Python 中的整數有幾個位元?
    計算整數的位數在Python中,整數沒有固有的長度概念。但是,如果您需要確定整數中的位數,可以考慮以下幾種方法。 轉換為字串一個簡單的方法是將整數轉換為字串,然後計算結果字串的長度。例如:length = len(str(123))這種方法很簡單,但需要將整數轉換為字串的中間步驟。 使用對數另一個...
    程式設計 發佈於2024-11-08
  • 為什麼使用 Z-Index 時我的偽元素會出現在標題元素上方?
    為什麼使用 Z-Index 時我的偽元素會出現在標題元素上方?
    Z-Index 與偽元素:案例研究在CSS 中,z-index 屬性指定元素的堆疊順序頁面,確定哪些元素出現在其他元素“前面”或“後面”。然而,當涉及偽元素時,例如 ::before 或 ::after,它們與 z-index 的交互有時可能不那麼簡單。 考慮一個場景,我們使用::before 偽元...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3