JavaScript箭頭函數(shù)的this怎么使用

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

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

    //構(gòu)造函數(shù)內(nèi)部使用箭頭函數(shù)

function Person(a) {

      this.a = a

      this.b = () => {

        console.log(this.a)

      }

    }

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

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

//自定義類時使用箭頭函數(shù)

var a="1"

    class A {

      constructor(a) {

        this.a = a

      }

      getName = () => {

        console.log(this)

      }

    }

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

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

//對象中使用構(gòu)造函數(shù)

  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

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

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

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

先來看普通函數(shù)，普通函數(shù)的this值會因調(diào)用該函數(shù)的對象發(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已經(jīng)由指向obj變成指向window，所以輸出1

//同樣的，apply,call,bind也能改變普通函數(shù)中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

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

    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)//這里前面已經(jīng)講過了，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

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

本文標題：JavaScript箭頭函數(shù)的this怎么使用
分享URL：http://www.jbt999.com/article48/pdpshp.html

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

廣告

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