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

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

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

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]刪除
最新教學 更多>
  • PHP未來:適應與創新
    PHP未來:適應與創新
    PHP的未來將通過適應新技術趨勢和引入創新特性來實現:1)適應云計算、容器化和微服務架構,支持Docker和Kubernetes;2)引入JIT編譯器和枚舉類型,提升性能和數據處理效率;3)持續優化性能和推廣最佳實踐。 引言在編程世界中,PHP一直是網頁開發的中流砥柱。作為一個從1994年就開始發展...
    程式設計 發佈於2025-07-06
  • 如何從Python中的字符串中刪除表情符號:固定常見錯誤的初學者指南?
    如何從Python中的字符串中刪除表情符號:固定常見錯誤的初學者指南?
    從python import codecs import codecs import codecs 導入 text = codecs.decode('這狗\ u0001f602'.encode('utf-8'),'utf-8') 印刷(文字)#帶有...
    程式設計 發佈於2025-07-06
  • 為什麼PYTZ最初顯示出意外的時區偏移?
    為什麼PYTZ最初顯示出意外的時區偏移?
    與pytz 最初從pytz獲得特定的偏移。例如,亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移: 差異源利用本地化將時區分配給日期,使用了適當的時區名稱和偏移量。但是,直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone(&#...
    程式設計 發佈於2025-07-06
  • FastAPI自定義404頁面創建指南
    FastAPI自定義404頁面創建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    程式設計 發佈於2025-07-06
  • 如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求模擬瀏覽器行為,以及偽造的用戶代理提供了一個用戶 - 代理標頭一個有效方法是提供有效的用戶式header,以提供有效的用戶 - 設置,該標題可以通過browser和Acterner Systems the equestersystermery和操作系統。通過模仿像Chro...
    程式設計 發佈於2025-07-06
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-07-06
  • \“(1)vs.(;;):編譯器優化是否消除了性能差異?\”
    \“(1)vs.(;;):編譯器優化是否消除了性能差異?\”
    答案: 在大多數現代編譯器中,while(1)和(1)和(;;)之間沒有性能差異。編譯器: perl: 1 輸入 - > 2 2 NextState(Main 2 -E:1)V-> 3 9 Leaveloop VK/2-> A 3 toterloop(next-> 8 last-> 9 ...
    程式設計 發佈於2025-07-06
  • 反射動態實現Go接口用於RPC方法探索
    反射動態實現Go接口用於RPC方法探索
    在GO 使用反射來實現定義RPC式方法的界面。例如,考慮一個接口,例如:鍵入myService接口{ 登錄(用戶名,密碼字符串)(sessionId int,錯誤錯誤) helloworld(sessionid int)(hi String,錯誤錯誤) } 替代方案而不是依靠反射...
    程式設計 發佈於2025-07-06
  • JavaScript計算兩個日期之間天數的方法
    JavaScript計算兩個日期之間天數的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    程式設計 發佈於2025-07-06
  • `console.log`顯示修改後對象值異常的原因
    `console.log`顯示修改後對象值異常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    程式設計 發佈於2025-07-06
  • 在GO中構造SQL查詢時,如何安全地加入文本和值?
    在GO中構造SQL查詢時,如何安全地加入文本和值?
    在go中構造文本sql查詢時,在go sql queries 中,在使用conting and contement和contement consem per時,尤其是在使用integer per當per當per時,per per per當per. [&​​​​&&&&&&&&&&&&&&&默元組方...
    程式設計 發佈於2025-07-06
  • 在Pandas中如何將年份和季度列合併為一個週期列?
    在Pandas中如何將年份和季度列合併為一個週期列?
    pandas data frame thing commans date lay neal and pree pree'和pree pree pree”,季度 2000 q2 這個目標是通過組合“年度”和“季度”列來創建一個新列,以獲取以下結果: [python中的concate...
    程式設計 發佈於2025-07-06
  • Android如何向PHP服務器發送POST數據?
    Android如何向PHP服務器發送POST數據?
    在android apache httpclient(已棄用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    程式設計 發佈於2025-07-06
  • 在程序退出之前,我需要在C ++中明確刪除堆的堆分配嗎?
    在程序退出之前,我需要在C ++中明確刪除堆的堆分配嗎?
    在C中的顯式刪除 在C中的動態內存分配時,開發人員通常會想知道是否有必要在heap-procal extrable exit exit上進行手動調用“ delete”操作員,但開發人員通常會想知道是否需要手動調用“ delete”操作員。本文深入研究了這個主題。 在C主函數中,使用了動態分配變量(...
    程式設計 發佈於2025-07-06
  • 如何正確使用與PDO參數的查詢一樣?
    如何正確使用與PDO參數的查詢一樣?
    在pdo 中使用類似QUERIES在PDO中的Queries時,您可能會遇到類似疑問中描述的問題:此查詢也可能不會返回結果,即使$ var1和$ var2包含有效的搜索詞。錯誤在於不正確包含%符號。 通過將變量包含在$ params數組中的%符號中,您確保將%字符正確替換到查詢中。沒有此修改,PD...
    程式設計 發佈於2025-07-06

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

Copyright© 2022 湘ICP备2022001581号-3