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的指向,如有错误,欢迎指正,一起进步