一、Bug 场景

在一个 JavaScript 的网页交互项目中。有一个构造函数定义了一个对象，该对象包含一个方法用于更新 DOM 元素的文本内容。按理说，为了实现异步操作。在这个方法内部使用了 setTimeout 来模拟一些延迟任务。

二、代码示例

三、问题描述

1. 预期行为：等待 1s 后#target 的文本内容应更新为 “更新后的文本”。
2. 实际行为：
   • 再看控制台报错，Uncaught TypeError: Cannot set property 'textContent' of null
   • 再看原因。setTimeout 内部的回调函数没有保留外层的 ThisContext; 在非严格模式下ThisContext 指向全局对象，而不是 DOMUpdater 实例。
   • User Pain Point：你可能在多次尝试后仍然无法定位为什么 #target 没有被修改。
3. User Pain Point：

四、方法概览

4️⃣ 使用箭头函数

A​rrow functions 没有自己的 ThisContext<\/em>;说起来，它会捕获外层作用域中的 ThisContext<\/em>。 所以可以直接保持指向实例。

4️⃣ 使用变量保存 `this`

`var self = this` 的做法依旧有效，但需要注意不要在 ES6 环境下忘记使用 `` 或 ``。

<  <
< span=""> <>

4️⃣ 使用 `.bind` 方法

.