作用域

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

全局作用域
- 　　全局作用域是在整個代碼中都可訪問的作用域。
局部作用域
- 　　局部作用域一般代指函數作用域（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>

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

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

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>