JavaScript 中箭头函数怎么在 Web API 的 MutationObserver 中处理变动-js教程-PHP中文网

箭头函数可在 mutationobserver 中正常使用，但需注意 this 绑定无自动继承、必须显式接收 mutations 和 observer 两个参数、异步操作时需确保 observer 实例可访问。

javascript 中箭头函数怎么在 web api 的 mutationobserver 中处理变动

箭头函数在 MutationObserver 中可以正常使用，但需注意 this 绑定和参数传递的细节——它本身不改变观察逻辑，但会影响回调内部对上下文和参数的访问方式。

箭头函数能直接作为 MutationObserver 回调

因为 MutationObserver 的回调是普通函数调用（非方法调用），this 始终为 window 或 undefined（严格模式），所以用箭头函数或普通函数在绑定 this 上没有实际差异。你可以这样写：

const observer = new MutationObserver((mutations, observerInstance) => {
  mutations.forEach(mutation => {
    console.log('变动类型：', mutation.type);
    console.log('变动节点：', mutation.target);
  });
});
observer.observe(document.body, { childList: true, subtree: true });

需手动保存外部 this 或变量（常见坑）

如果你在类或对象方法中创建观察者，又想在箭头回调里访问实例属性，不能依赖 this 自动绑定（因为 MutationObserver 不调用它为方法）。正确做法是提前捕获：

用变量缓存 this（如 const self = this;）
或直接在箭头函数外层闭包中引用所需值（推荐）
避免在箭头函数里写 this.xxx 期望指向类实例——它不会如预期工作

示例：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

class DomWatcher {
  constructor() {
    this.count = 0;
  }
  start() {
    // ✅ 正确：用 const 捕获实例
    const instance = this;
    const observer = new MutationObserver(() => {
      instance.count++; // 可访问
      console.log('已变动', instance.count, '次');
    });
    observer.observe(document.body, { childList: true });
  }
}

注意 mutations 参数不可省略

箭头函数写法容易误写成 () => {...} 而漏掉必传的两个参数。MutationObserver 回调签名固定为：

第一个参数：Array<mutationrecord></mutationrecord>（变动记录列表）
第二个参数：MutationObserver 实例本身（用于 disconnect() 等）

即使你只关心变动，也建议显式写出参数，避免逻辑遗漏：

// ❌ 不推荐：丢失参数，mutations 是 undefined
new MutationObserver(() => { /* ... */ });
<p>// ✅ 推荐：明确接收，哪怕只用 mutations
new MutationObserver((mutations) => {
if (mutations.length > 0) { /<em> 处理 </em>/ }
});</p>