作用域

在討論箭頭函數(shù)與普通函數(shù)的區(qū)別之前，我們需要先討論一下作用域的概念。作用域分為:全局作用域，局部作用域，塊級(jí)作用域

全局作用域
- 　　全局作用域是在整個(gè)代碼中都可訪(fǎng)問(wèn)的作用域。
局部作用域
- 　　局部作用域一般代指函數(shù)作用域（Function Scope），它是在函數(shù)內(nèi)部聲明的作用域，函數(shù)內(nèi)部的變量和函數(shù)只能在函數(shù)內(nèi)部訪(fǎng)問(wèn)，外部無(wú)法直接訪(fǎng)問(wèn)
塊級(jí)作用域
- 　　塊級(jí)作用域是在代碼塊（通常是由大括號(hào){}包裹起來(lái)的部分）內(nèi)聲明的作用域。比如if(){...}、for(...){...}、try{...}等

示例

<script type="text/javascript">
        // 全局作用域
        const global_a="我是全局作用域";
        const b=function()
        {
            const local_b="我是局部作用域";
            try{
                const block_c="我是塊級(jí)作用域";
                console.log(block_c);
            }
            catch(ex)
            {
            }
            console.log(global_a);
            console.log(local_b);
        }
        b();
    </script>

箭頭函數(shù)與普通函數(shù)的區(qū)別

語(yǔ)法的不同
- 箭頭函數(shù)語(yǔ)法：箭頭函數(shù)由小括號(hào)()、箭頭=》、大括號(hào){}組成，例如(x)=>{ return 2*x;}, (x)=> 2*x... ,其中括號(hào)和大括號(hào)依情況可以省略
- 普通函數(shù)語(yǔ)法：普通函數(shù)由關(guān)鍵字function、小括號(hào)、大括號(hào){}組成，例如：function(x)=>{return 2*x;}

this綁定的不同

箭頭函數(shù)沒(méi)有自己的this綁定，它會(huì)繼承外層作用域的this值(繼承規(guī)則：向外層作用域中, 一層層查找this, 直到有this的定義)。而普通函數(shù)的this值是根據(jù)調(diào)用時(shí)的上下文決定的。這里給出一些示例

<div>
        <button id="bt1">利用箭頭函數(shù)構(gòu)造事件處理函數(shù)</button>
        <button id="bt2">利用普通函數(shù)構(gòu)造事件處理函數(shù)</button>
    </div>
    <!-- 箭頭函數(shù)沒(méi)有自己的this綁定，它會(huì)繼承外層作用域的this值。而普通函數(shù)的this值是根據(jù)調(diào)用時(shí)的上下文決定的 -->
    <script type="text/javascript">
        const bt1 = document.querySelector("#bt1");
        const bt2 = document.querySelector("#bt2");
        // 這里有兩個(gè)點(diǎn)擊事件，一個(gè)綁定的事件處理函數(shù)為普通函數(shù)，一個(gè)為箭頭函數(shù)
 
        bt2.addEventListener("click", function() {
            //這里的this是id="bt2"，this指向調(diào)用這個(gè)函數(shù)的對(duì)像
            console.log(this);
        });
 
        bt1.addEventListener("click", () => {
            //這里的this是window,箭頭函數(shù)的this指向最近的外層作用域中的this所指對(duì)象
            console.log(this);
        });
    </script>

<div>
        <button id="bt1">利用箭頭函數(shù)構(gòu)造事件處理函數(shù)</button>
        <button id="bt2">利用普通函數(shù)構(gòu)造事件處理函數(shù)</button>
    </div>
    <!-- 箭頭函數(shù)沒(méi)有自己的this綁定，它會(huì)繼承外層作用域的this值。而普通函數(shù)的this值是根據(jù)調(diào)用時(shí)的上下文決定的 -->
    <script type="text/javascript">
        const obj = {
            a() {
                setTimeout(function() {
                    //因?yàn)槭莣indow對(duì)象調(diào)用了定時(shí)函數(shù)，所以這里的this是window
                    console.log(this);
                })
            },
            b() {
                setTimeout(() => {
                    //因?yàn)榧^函數(shù)里的this指向了最近的外層函數(shù)作用域中，所以這里的this是obj對(duì)象
                    console.log(this);
                })
            }
        }
        obj.a(); // 打印出 Window
        obj.b(); // 打印出 當(dāng)前對(duì)象obj
    </script>

構(gòu)造函數(shù)：箭頭函數(shù)不能用作構(gòu)造函數(shù)，不能使用new關(guān)鍵字實(shí)例化對(duì)象。普通函數(shù)可以被用作構(gòu)造函數(shù)創(chuàng)建對(duì)象實(shí)例
arguments對(duì)象：箭頭函數(shù)沒(méi)有自己的arguments對(duì)象，它會(huì)繼承外層作用域的arguments對(duì)象。普通函數(shù)則會(huì)創(chuàng)建自己的arguments對(duì)象
箭頭函數(shù)沒(méi)有原型屬性（prototype）
箭頭函數(shù)不能通過(guò)call()、apply()或bind()方法來(lái)改變this的指向

總結(jié)

普通函數(shù)比較靈活，適用于各種場(chǎng)景，包括作為構(gòu)造函數(shù)、改變this指向等。而箭頭函數(shù)更適合用于簡(jiǎn)單的函數(shù)表達(dá)式和回調(diào)函數(shù)，需要根據(jù)具體的使用場(chǎng)景和需求來(lái)選擇使用箭頭函數(shù)還是普通函數(shù)。

轉(zhuǎn)自https://www.cnblogs.com/smallstone/p/18106142

該文章在 2025/2/19 10:56:07 編輯過(guò)

關(guān)鍵字查詢(xún)