首页 网络技术
  1. 正文

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怎么使用
本文链接:https://www.qqooo.cn/post/6461.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!