深入理解ES6箭头函数中的this

Posted itgezhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解ES6箭头函数中的this相关的知识,希望对你有一定的参考价值。

  • 箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别
    • 箭头函数内部的this是词法作用域,由上下文确定
    • 箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
  • 由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()bind()调用箭头函数时,无法对this进行绑定(无法使用call()或者apply()bind()改变this的指向),即传入的第一个参数被忽略。内部的this指向父执行上下文里面的this。
  • 箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数
  • 箭头函数中的this是在定义函数的时候绑定,看一个例子:

    var x = 11;
    var obj = {
        x: 22,
        say: ()=>{
            console.log(this.x);
        }
    }
    obj.say();  // 输出的值为11

     

  • 所谓的定义时候绑定,就是this是继承自父执行上下文中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。

  • 而对于下面的例子:

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 28

     

  • 例子中箭头函数本身是在getAge方法中定义的,因此,getAge方法的父执行上下文是obj,因此这里的this指向则为obj对象。

以上是关于深入理解ES6箭头函数中的this的主要内容,如果未能解决你的问题,请参考以下文章

深入理解ES6箭头函数中的this

ES6知识盲点整理

ES6中的箭头函数

怎么理解这个箭头函数里的this指向

深入ES6中的class类

es6 箭头函数和function的区别