作用域

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

全局作用域
- 　　全局作用域是在整個代碼中都可訪問的作用域。
局部作用域
- 　　局部作用域一般代指函數(shù)作用域（Function Scope），它是在函數(shù)內部聲明的作用域，函數(shù)內部的變量和函數(shù)只能在函數(shù)內部訪問，外部無法直接訪問
塊級作用域
- 　　塊級作用域是在代碼塊（通常是由大括號{}包裹起來的部分）內聲明的作用域。比如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>

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

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

this綁定的不同

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

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

<div>
        <button id="bt1">利用箭頭函數(shù)構造事件處理函數(shù)</button>
        <button id="bt2">利用普通函數(shù)構造事件處理函數(shù)</button>
    </div>
    <!-- 箭頭函數(shù)沒有自己的this綁定，它會繼承外層作用域的this值。而普通函數(shù)的this值是根據(jù)調用時的上下文決定的 -->
    <script type="text/javascript">
        const obj = {
            a() {
                setTimeout(function() {
                    //因為是window對象調用了定時函數(shù)，所以這里的this是window
                    console.log(this);
                })
            },
            b() {
                setTimeout(() => {
                    //因為箭頭函數(shù)里的this指向了最近的外層函數(shù)作用域中，所以這里的this是obj對象
                    console.log(this);
                })
            }
        }
        obj.a(); // 打印出 Window
        obj.b(); // 打印出 當前對象obj
    </script>

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