概述

我們在學習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指向等。而箭頭函數更適合用於簡單的函數表達式和回調函數，需要根據具體的使用場景和需求來選擇使用箭頭函數還是普通函數。