IT培訓-高端面授IT培訓機構
          云和教育:云和數據集團高端IT職業教育品牌
          • 國家級
            全民數字素養與技能培訓基地
          • 河南省
            第一批產教融合型企業建設培育單位
          • 鄭州市
            數字技能人才(碼農)培養評價聯盟

          什么是箭頭函數?箭頭函數中this關鍵字的用法

          • 發布時間:
            2023-03-15
          • 版權所有:
            云和教育
          • 分享:

          箭頭函數是ES6中新增的函數,它用于簡化函數的定義語法,有自己的特殊語法,接收一定數量的參數,并在其封閉的作用域的上下文(即定義它們的函數或其他代碼)中操作。

          ES6中,箭頭函數的基本語法

          箭頭函數基本語法,具體如下:

             0=>{}

          箭頭函數以小括號開頭,在小括號中可以放置參數。小括號的后面要跟著箭頭(=>),箭頭后面要寫一個大括號來表示函數體,這是箭頭函數的固定語法。

          箭頭函數調用:因為箭頭函數沒有名字,我們通常的做法是把箭頭函數賦值給一個變量,變量名就是函數名,然后通過變量名去調用函數即可。

             <script>
              const fn = () => {
               console.log(123);      
          ∥輸出結果:123
             };
             fn();∥函數調用
             </script>

          箭頭函數的特點

          特點1:省略大括號

          在箭頭函數中,如果函數體中只有一句代碼,且代碼的執行結果就是函數的返回值,此時可以省略函數體大括號。計算兩個數值相加的結果,示例代碼如下:

           

          <script>
           const sum = (numl, num2) => num1 + num2;
           //等價于
           // const sum = (num1, num2)=>{
           // return num1 + num2;
           //};
           const result = sum(10, 20); //使用result接收sum() 函數執行的結果
           console.log(result); //在控制臺輸出result值, 結果為30 
          </script>

          特點2:省略參數外部的小括號

          在箭頭函數中,如果參數只有一個,可以省略參數外部的小括號。只有一個參數的函數定義方式,示例代碼如下:

             <script>
              //傳統的函數定義方式
              //function fn(v){
              // return 
              v;
              //}
              //ES6中函數定義方式
              const fn = v => v;
             </script>

          特點2:省略參數外部的小括號

          定義帶有一個參數的函數,并在瀏覽器的彈出框中彈出參數值。示例代碼如下:

             <script>
              const fn = v =>{
               alert(v);
              };
              fn(20);
             </script>

          箭頭函數中的this關鍵字

          ES6前,JavaScript的this關鍵字指向的對象是在運行時基于函數的執行環境綁定的,在全局函數中,this指向的是window;當函數被作為某個對象的方法調用時,this就指向那個對象。

          ES6中,箭頭函數不綁定this關鍵字,它沒有自己的this關鍵字,如果在箭頭函數中使用this關鍵字,那么this關鍵字指向的是箭頭函數定義位置的上下文this。也就是說,箭頭函數被定義在哪,箭頭函數中的this就指向誰。

          箭頭函數解決了this執行環境所造成的一些問題,如解決了匿名函數this指向的問題(匿名函數的執行環境具有全局性),包括setTimeout()和setInterval(0中使用this所造成的問題。

             <script>
              const obj = { name: 'zhangsan' };
              function 
               fn(){
               console.log(this);               //輸出結果:{name:"zhangsan"}
              return () =>{
               console.log(this);               //輸出結果:{name:"zhangsan"}
               };
              }
              // call()方法可以改變函數內部的this指向,將函數fn(0內部的this指向obj對象
              const resFn = 
              fn.call(obj);
              resFn();
             </script>