普通函數與箭頭函數的區別

来源:https://www.cnblogs.com/smallstone/p/18106142
-Advertisement-
Play Games

一、是什麼 HTTP頭欄位(HTTP header fields),是指在超文本傳輸協議(HTTP)的請求和響應消息中的消息頭部分 它們定義了一個超文本傳輸協議事務中的操作參數 HTTP頭部欄位可以自己根據需要定義,因此可能在 Web伺服器和瀏覽器上發現非標準的頭欄位 下麵是一個HTTP請求的請求頭 ...


概述

我們在學習js的時候經常會跟函數打交道,其中普通函數和箭頭函數是用的比較多的2種,很多同學並不清楚二者的區別,這裡我們花一些時間討論一下。

作用域

在討論箭頭函數與普通函數的區別之前,我們需要先討論一下作用域的概念。作用域分為:全局作用域,局部作用域,塊級作用域

  • 全局作用域
    •   全局作用域是在整個代碼中都可訪問的作用域。
  • 局部作用域
    •   局部作用域一般代指函數作用域(Function Scope),它是在函數內部聲明的作用域,函數內部的變數和函數只能在函數內部訪問,外部無法直接訪問
  • 塊級作用域
    •   塊級作用域是在代碼塊(通常是由大括弧{}包裹起來的部分)內聲明的作用域。比如if(){...}、for(...){...}、try{...}等
  • 示例
    <script type="text/javascript">
            // 全局作用域
            const global_a="我是全局作用域";
            const b=function()
            {
                const local_b="我是局部作用域";
                try{
                    const block_c="我是塊級作用域";
                    console.log(block_c);
                }
                catch(ex)
                {
    
                }
                console.log(global_a);
                console.log(local_b);
            }
            b();
        </script>

     

箭頭函數與普通函數的區別

 

  1. 語法的不同

    • 箭頭函數語法:箭頭函數由 小括弧()、箭頭=》、大括弧{}組成,例如(x)=>{ return 2*x;},  (x)=> 2*x...  ,其中括弧和大括弧依情況可以省略
    • 普通函數語法:普通函數由關鍵字function、小括弧、大括弧{}組成,例如:function(x)=>{return 2*x;}
  2. this綁定的不同

    • 箭頭函數沒有自己的this綁定,它會繼承外層作用域的this值(繼承規則:向外層作用域中, 一層層查找this, 直到有this的定義)。而普通函數的this值是根據調用時的上下文決定的。這裡給出一些示例
      • <div>
                <button id="bt1">利用箭頭函數構造事件處理函數</button>
                <button id="bt2">利用普通函數構造事件處理函數</button>
            </div>
            <!-- 箭頭函數沒有自己的this綁定,它會繼承外層作用域的this值。而普通函數的this值是根據調用時的上下文決定的 -->
            <script type="text/javascript">
                const bt1 = document.querySelector("#bt1");
                const bt2 = document.querySelector("#bt2");
                // 這裡有兩個點擊事件,一個綁定的事件處理函數為普通函數,一個為箭頭函數
         
                bt2.addEventListener("click", function() {
                    //這裡的this是id="bt2",this指向調用這個函數的對像
                    console.log(this);
                });
         
                bt1.addEventListener("click", () => {
                    //這裡的this是window,箭頭函數的this指向最近的外層作用域中的this所指對象
                    console.log(this);
                });
            </script>
        <div>
                <button id="bt1">利用箭頭函數構造事件處理函數</button>
                <button id="bt2">利用普通函數構造事件處理函數</button>
            </div>
            <!-- 箭頭函數沒有自己的this綁定,它會繼承外層作用域的this值。而普通函數的this值是根據調用時的上下文決定的 -->
            <script type="text/javascript">
                const obj = {
                    a() {
                        setTimeout(function() {
                            //因為是window對象調用了定時函數,所以這裡的this是window
                            console.log(this);
                        })
                    },
                    b() {
                        setTimeout(() => {
                            //因為箭頭函數里的this指向了最近的外層函數作用域中,所以這裡的this是obj對象
                            console.log(this);
                        })
                    }
                }
                obj.a(); // 列印出 Window
                obj.b(); // 列印出 當前對象obj
        
            </script>

         

  3. 構造函數:箭頭函數不能用作構造函數,不能使用new關鍵字實例化對象。普通函數可以被用作構造函數創建對象實例

  4. arguments對象:箭頭函數沒有自己的arguments對象,它會繼承外層作用域的arguments對象。普通函數則會創建自己的arguments對象

  5. 箭頭函數沒有原型屬性(prototype)

  6. 箭頭函數不能通過call()、apply()或bind()方法來改變this的指向

總結

普通函數比較靈活,適用於各種場景,包括作為構造函數、改變this指向等。而箭頭函數更適合用於簡單的函數表達式和回調函數,需要根據具體的使用場景和需求來選擇使用箭頭函數還是普通函數。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、Grid/GridItem 1.概述 網格佈局是一種新型的佈局方式,它按照網格來劃分頁面,通過列和行來定義網格,使得頁面的佈局更加靈活、簡潔、易於維護。網格佈局能夠將頁面分成多個單元格,可以在這些單元格中佈置各種元素,例如文本、圖片、媒體等,從而實現頁面的排版。網格佈局支持自適應佈局,能 ...
  • Android 手勢相關(二) 本篇文章繼續記錄下android 手勢相關的內容. 1: GestureOverlayView簡介 GestureOverlayView是Android中的一個視圖組件,用於捕捉和處理手勢操作. GestureOverlayView的主要用途: 手勢識別: 通過Ges ...
  • Android 手勢相關(一) 本篇文章主要記錄下android 手勢相關的一些內容. Android 提供了一套強大的手勢識別框架,可以用來檢測和處理用戶的手勢操作. 1: 手勢識別 Android 提供了GestureDetector類來識別手勢,通過GestureDetector可以檢測用戶的 ...
  • 一、List 1.概述 列表是一種非常有用且功能強大的容器,它常用於呈現同類型或多類型數據集合,例如圖片、文本、音樂、通訊錄、購物清單等。列表對於顯示大量內容而不耗費過多空間和記憶體是非常有幫助的,因為當列表項數量超過屏幕大小時,可以自動提供滾動功能。這使得列表成為構建結構化、可滾動信息的理想 ...
  • 前端技術棧+Vue筆記 ES6新特性 1.let 1)let聲明有嚴格的局部作用域 ​ 此時"console.log("job= "+job)"將報錯 { var name = "zy學習"; let job = "java工程師"; console.log("name= "+name) conso ...
  • 預覽 打字機動畫是一種常見的網頁效果,通常用於“我是某某”這樣的場景,比如個人簡介或者產品介紹,需要在多個辭彙之間切換。這篇博文將從頭開始製作類似的效果。它看起來像這樣: 我要成為賽馬娘 高手! 如果這裡的黃字不會動,可能是因為這裡的架構不支持,請到https://penghy.com/?p=typ ...
  • 快速入門 1. 創建第一個應用 由於該庫還不支持 src 引入,接下來的例子我將在 webpack 環境下演示,webpack 模板 已經配置完畢,可直接下載使用 創建一個應用可用通過 new 來創建實例或通過提供的 createApp 方法來創建下麵我將分別演示 通過 new 來創建 App , ...
  • 遍歷是指通過或遍歷節點樹 遍歷節點樹 通常,您想要迴圈一個 XML 文檔,例如:當您想要提取每個元素的值時。 這被稱為"遍歷節點樹"。 下麵的示例迴圈遍歷所有 <book> 的子節點,並顯示它們的名稱和值: <!DOCTYPE html> <html> <body> <p id="demo"></p ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...