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();