JavaScript Clock类调用this.template执行replace方法报错原因求解

报错原因 #

错误核心是setInterval调用时render方法的this指向丢失：

• 你在start方法里第一次直接调用this.render()时，this指向Clock类的实例，所以第一次渲染正常，你也能看到首条输出13:56:17。
• 当你把this.render作为回调函数传给setInterval时，该方法会脱离Clock实例的上下文执行，运行时this指向的是全局对象（Node环境下是Timeout对象，浏览器环境下是window对象），这些全局对象上没有你挂载的template属性，所以this.template取值为undefined，调用replace方法自然就抛出了类型错误。

常用解决办法 #

• 用箭头函数包裹render调用，箭头函数会继承外层start方法的this指向：

this.timer = setInterval(() => this.render(), 1000);

• 用bind方法手动绑定this到Clock实例：

this.timer = setInterval(this.render.bind(this), 1000);

• 类定义时直接把render方法改成箭头函数，提前绑定this到实例：

class Clock{
  // constructor逻辑不变
  render = () => {
    // 原有render逻辑保持不变
  }
}

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