箭头函数的this指向——分类讨论

很久之前就学习有关箭头函数的this指向,现在发现自己还是了解的不够深入
 
看了许多关于箭头函数this指向的解释,说的是
 
箭头函数没有自己的this,它的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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64389.shtml

张贴在3