JavaScript 中怎么在定时器轮询里维护对象 this-js教程-PHP中文网

javascript定时器回调中this默认丢失，解决方法有四种：①箭头函数继承外层this；②bind显式绑定；③缓存this到变量；④类字段+箭头函数自动绑定。推荐优先使用箭头函数或类字段语法。

javascript 中怎么在定时器轮询里维护对象 this

在 JavaScript 定时器（如 setInterval 或 setTimeout）中，回调函数默认运行在全局上下文（非严格模式下是 window，严格模式下是 undefined），所以直接访问 this 通常会丢失原始对象的引用。解决的核心思路是：**确保回调执行时能正确访问到目标对象的 this**。

使用箭头函数保留词法作用域的 this

箭头函数不绑定自己的 this，而是继承外层函数作用域的 this 值，非常适合用在定时器回调中：

class TimerService {
  constructor() {
    this.count = 0;
    this.intervalId = null;
  }
  start() {
    // 箭头函数自动捕获外层 this（即当前实例）
    this.intervalId = setInterval(() => {
      this.count++; // ✅ 正确访问实例属性
      console.log(this.count);
    }, 1000);
  }
  stop() {
    clearInterval(this.intervalId);
  }
}

显式绑定 this：bind / call / apply

如果用普通函数定义回调，可通过 bind 显式绑定 this：

start() {
  this.intervalId = setInterval(function() {
    this.count++;
    console.log(this.count);
  }.bind(this), 1000); // ✅ 手动绑定 this 到当前实例
}

注意：call 和 apply 是立即执行，不能直接用于 setInterval；只有 bind 返回新函数，适合传入定时器。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

缓存 this 到变量（传统但有效）

在 ES5 环境或需要兼容旧浏览器时，常用 var self = this 方式：

start() {
  var self = this; // 缓存 this
  this.intervalId = setInterval(function() {
    self.count++; // ✅ 使用 self 替代 this
    console.log(self.count);
  }, 1000);
}

使用 class 字段语法 + 箭头函数（现代简洁写法）

结合类字段和箭头函数，可把回调声明为实例属性，天然绑定 this：

class TimerService {
  count = 0;
  intervalId = null;

  // 实例方法，自动绑定 this（需支持类字段语法）
  onTick = () => {
    this.count++;
    console.log(this.count);
  };

  start() {
    this.intervalId = setInterval(this.onTick, 1000);
  }

  stop() {
    clearInterval(this.intervalId);
  }
}

⚠️ 注意：该写法依赖类字段提案（已进入 ECMAScript 标准），需确认运行环境支持（现代浏览器、Node.js ≥ 12 或配合 Babel）。

不复杂但容易忽略：只要记住定时器回调不是对象方法调用，就不会默认继承 this；选一种方式固定住它即可 —— 推荐优先用箭头函数或类字段语法，语义清晰且不易出错。