JavaScript 标准函数与箭头函数中this指向问题

前言

作为前端小白，在学习JavaScript中函数时，函数中this指向经常混淆，记录一下。

上代码

class Button {
  constructor(value) {
    this.value = value
  }
  
  sayHello = () => {
    console.log(this);
  }
  
  sayHi() {
    console.log(this);
  }
}
let button = new Button()
setTimeout(button.sayHello, 1000);
setTimeout(button.sayHi, 2000);

思考一下，这两个定时器输出的this是什么？

运行结果

结果分析

• 由于箭头函数本身是没有this的，在这个示例代码中，在创建定义这个button对象时，button对象中sayHello箭头函数中的this则引用的是button，即箭头函数中，this引用的是定义时的上下文
• 在标准函数中，this指向的是调用的上下文，即谁调用函数，this指向谁 于是，在第一个定时器中调用button.sayHello()时，这个箭头函数中this指向的是button对象 在第二个定时器中调用button.sayHi()时，调用者是window对象，则该函数中的this指向的是window对象

结论

在标准函数中，this引用的是调用的上下文；在箭头函数中，this引用的是定义时的上下文。