很久之前就学习有关箭头函数的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