JavaScript类方法中this.work返回undefined问题求助（番茄钟场景）

兄弟，这个this指向的坑真的很容易踩！我当初刚用类写定时器相关逻辑的时候，也栽过好几次跟头，给你捋捋原因和解决办法：

问题根源 #

你遇到的核心问题是函数的this绑定丢失：当你把countdown作为回调传给setInterval（你说的inter方法应该是调用它吧？）的时候，countdown的调用上下文变了——它不再是你的番茄钟实例t1，而是变成了全局对象（非严格模式下）或者undefined（严格模式下），所以内部访问this.work自然拿不到实例上的属性，而你直接从外部console.log(t1.work)能拿到，是因为这里明确指向了实例本身。

三种常见解决办法 #

1. 把countdown改成箭头函数 #

箭头函数的this是继承自外层作用域的，也就是类实例的this，不管怎么调用它，this都会牢牢绑定到实例上：

class PomodoroClock {
  constructor() {
    this.work = 25; // 假设你的工作时长是25分钟
  }

  inter() {
    setInterval(this.countdown, 1000);
  }

  // 改成箭头函数定义
  countdown = () => {
    console.log(this.work); // 现在能正常输出25啦
    // 你的倒计时逻辑...
  }
}

const t1 = new PomodoroClock();
t1.inter();

2. 在构造函数里手动绑定this #

通过bind方法把countdown的this固定为类实例，这样后续不管怎么传递这个函数引用，this都不会变：

class PomodoroClock {
  constructor() {
    this.work = 25;
    // 关键：绑定this到实例
    this.countdown = this.countdown.bind(this);
  }

  inter() {
    setInterval(this.countdown, 1000);
  }

  countdown() {
    console.log(this.work); // 正常输出25
    // 你的倒计时逻辑...
  }
}

3. 在setInterval里用箭头函数包裹调用 #

这种方式不用修改countdown本身，而是在调用的时候用箭头函数包裹，确保调用countdown时的this是实例：

class PomodoroClock {
  constructor() {
    this.work = 25;
  }

  inter() {
    // 箭头函数的this指向实例，再调用this.countdown
    setInterval(() => this.countdown(), 1000);
  }

  countdown() {
    console.log(this.work); // 正常输出25
    // 你的倒计时逻辑...
  }
}

这三种方法都能解决问题，选你觉得顺手的就行~

内容的提问来源于stack exchange，提问作者Chantun