JavaScript箭頭函數的this怎么使用

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

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

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，而不是執行時的this。

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

 var a=1

   var obj = {

        a:2,

        say(){

            setTimeout(

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

               1000

           );

        }

    };

    obj.say();//輸出1

//因為setTimeout是window對象的方法，當延遲1s后執行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怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。