JavaScript箭頭函數的this怎么使用

這篇文章主要介紹“JavaScript箭頭函數的this怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript箭頭函數的this怎么使用”文章能幫助大家解決問題。

網站建設哪家好，找創(chuàng)新互聯建站！專注于網頁設計、網站建設、微信開發(fā)、小程序設計、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了尼勒克免費建站歡迎大家使用！

    //構造函數內部使用箭頭函數

function Person(a) {

      this.a = a

      this.b = () => {

        console.log(this.a)

      }

    }

    new Person(10).b()//輸出10

//箭頭函數的this從外層繼承而來。本例箭頭函數中this等于箭頭函數外的this，正確。

//自定義類時使用箭頭函數

var a="1"

    class A {

      constructor(a) {

        this.a = a

      }

      getName = () => {

        console.log(this)

      }

    }

    new A("2").getName()//輸出2

//箭頭函數的this從外層繼承而來。我的理解是箭頭函數中this繼承了類中的this，正確

//對象中使用構造函數

  var a = 1;

    var obj = {

      a: 2,

      say1: () => {

        console.log(this.a);

      },

      say2: function () {

        console.log(this.a);

      },

      b: {

       a: 3,

       say5: ()=> {

          console.log(this.a)

        }

      }

    };

    obj.say1();  //1

    obj.say2();  //2

obj.b.say5() //1

    let say3 = obj.say1;

    let say4 = obj.say2;

    say3();     //1

    say4();     //1

//如果說箭頭函數的this從外層繼承而來的話，那么這里say1中的this應該是指向obj，但是結果是指向window，而且不管嵌套多少層對象，箭頭函數的this始終指向window（從say5輸出1可以看出）,say3之所以輸出1是因為let say3=obj.say1只是將函數賦值給say3，say3的擁有者是window，故this指向window。

總結：我覺得”箭頭函數的this從外層繼承而來“這句話不能將this的指向一言概之，還是要分情況討論，當然，也有可能是我對這句話理解的還不夠透徹。

最后還有一個知識點：箭頭函數中的this指向的是定義時的this，而不是執(zhí)行時的this。

先來看普通函數，普通函數的this值會因調用該函數的對象發(fā)生改變而改變

 var a=1

   var obj = {

        a:2,

        say(){

            setTimeout(

               function(){console.log(this.a);},

               1000

           );

        }

    };

    obj.say();//輸出1

//因為setTimeout是window對象的方法，當延遲1s后執(zhí)行console.log(this.a)時，這時的this已經由指向obj變成指向window，所以輸出1

//同樣的，apply,call,bind也能改變普通函數中this指向    

var obj = {

      a: 2,

      say: function () {

        console.log(this.a)

      }

    };

    var obj2 = {

      a: 3

    }

    obj.say()//輸出2

    obj.say.call(obj2)//輸出3

    obj.say.apply(obj2)//輸出3

    var say2=obj.say.bind(obj2)

    say2()//輸出3

對比之下，箭頭函數的this在函數定義時就已經確定，不會改變(看下面例子)

    var a = 1

    var obj = {

      a: 2,

      say() {

        setTimeout(

          () => { console.log(this.a); },

          1000

        );

      }

    };

    obj.say();//輸出2

    var a = 1

    var obj = {

      a: 2,

      say: ()=> {

        console.log(this.a)//這里前面已經講過了，this指向的是window

      }

    };

    var obj2 = {

      a: 3

    }

    obj.say()//輸出1

    obj.say.call(obj2)//輸出1

    obj.say.apply(obj2)//輸出1

    var say2=obj.say.bind(obj2)

    say2()//輸出1

關于“JavaScript箭頭函數的this怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

本文標題：JavaScript箭頭函數的this怎么使用
分享URL：http://muchs.cn/article48/pdpshp.html

成都網站建設公司_創(chuàng)新互聯，為您提供做網站、關鍵詞優(yōu)化、云服務器、營銷型網站建設、網站營銷、網站設計公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯