Skip to main content

箭头函数的this

普通函数的this

普通函数的this 和java中的this是一样的,就是函数的调用者

在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的 this 值:

  • 如果该函数是一个构造函数,this 指针指向一个新的对象
  • 在严格模式下的函数调用下,this 指向undefined
  • 如果该函数是一个对象的方法,则它的 this 指针指向这个对象

This被证明是令人厌烦的面向对象风格的编程。

function Person() {
// Person() 构造函数定义 `this`作为它自己的实例。
this.age = 0;

setInterval(function growUp() {
// 在非严格模式,growUp() 函数定义 `this`作为全局对象,
// 与在 Person() 构造函数中定义的 `this`并不相同。
this.age++;
}, 1000);
}

var p = new Person();

在上面这个例子中,this.age 并不指向Person中的age 因为groupUp回调函数并不是通过Person对象调用的

箭头函数的this

箭头函数没有自己的this指向,它的this指向上一级作用域的this

下面这个例子setInterval中的箭头函数的上一层是Person,因为他上一层有一个函数Person,所以这个外层,指的是函数。

箭头函数会继承外层函数的this值

function Person(){
this.age = 0;

setInterval(() => {
this.age++; // |this| 正确地指向 p 实例
}, 1000);
}

var p = new Person();

如果箭头函数外面没有包裹函数,那么它就是指向this

const obj = {
a: () => {
console.log(this);
}
}
obj.a();