JS的this总结(下)-ES6箭头函数this指向

JS的this总结(下)-ES6箭头函数this指向

​ 在讲this之前,首先简单了解一下ES6箭头函数

​ 最近在学习ES6的过程中,接触到了ES6中最受人们关注的一个特性:箭头函数,然后学习下去的时候,遇到了一个比较困惑的问题:箭头函数的this指向

​ 然后上网查了一下资料,总结了一下

​ 首先有一个值得注意的地方是:

​ => 箭头函数没有一个自己的 this

​ 在平常新定义的函数中,都有他们自己的this,并且这个this指向调用该函数的对象

​ 但是在学习JS的过程中,我们都会遇到这样一个问题:

function Person() {
    // 构造函数 Person() 定义的 `this` 就是新实例对象自己
    this.age = 0;
    setInterval(function growUp() {
        // 在非严格模式下，growUp() 函数定义了其内部的 `this`为全局对象, 
        // 不同于构造函数Person()的定义的 `this`
        this.age++;
    }, 3000);
}

var p = new Person();

​ 那定时器里面的this指向的是谁?

​ 明显是Window对象

​ 所以我们通常都会写成

function Person() {
    var that = this; 
    that.age = 0;
    setInterval(function growUp() {
        // 回调里面的 `that` 变量就指向了期望的那个对象了
        that.age++;
    }, 3000);
}

var p = new Person();

​ 但是我们如果将定时器中的函数改成箭头函数呢?

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}

var p = new Person();

这个时候的this指向的又是哪里?

答案是:Person的实例对象

在MDN文档中有这么一句话:箭头函数

箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值

​ 这也就说明了箭头函数里的this,其实并不是箭头函数里的(这句话或许有点错误),而且他从他本身的作用域链上,逐层往上寻找,直到找到局部所定义的this为止,这也就是ES6 箭头函数中的 this？你可能想多了（翻译）中写到的

this 生来局部，而且一直都保持局部态。=>箭头函数并不会绑定一个 this 变量，它的作用域会如同寻常所做的一样一层层地去往上查找。

这些就是我个人总结出来的一些在箭头函数中this的指向,如有错误,欢迎指正,一起进步