作用域

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

• 全局作用域
  • 　　全局作用域是在整個(gè)代碼中都可訪問(wèn)的作用域。
• 局部作用域
  • 　　局部作用域一般代指函數(shù)作用域（Function Scope），它是在函數(shù)內(nèi)部聲明的作用域，函數(shù)內(nèi)部的變量和函數(shù)只能在函數(shù)內(nèi)部訪問(wèn)，外部無(wú)法直接訪問(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ū)別

1. 語(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;}

2. 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>

        

3. 構(gòu)造函數(shù)：箭頭函數(shù)不能用作構(gòu)造函數(shù)，不能使用new關(guān)鍵字實(shí)例化對(duì)象。普通函數(shù)可以被用作構(gòu)造函數(shù)創(chuàng)建對(duì)象實(shí)例

4. arguments對(duì)象：箭頭函數(shù)沒(méi)有自己的arguments對(duì)象，它會(huì)繼承外層作用域的arguments對(duì)象。普通函數(shù)則會(huì)創(chuàng)建自己的arguments對(duì)象

5. 箭頭函數(shù)沒(méi)有原型屬性（prototype）

6. 箭頭函數(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