箭头函数可在 MutationObserver 中正常使用，但需注意 this 绑定无自动继承、必须显式接收 mutations 和 observer 两个参数、异步操作时需确保 observer 实例可访问。
箭头函数在 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期望指向类实例——它不会如预期工作
示例：
立即学习“Java免费学习笔记（深入）”；
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>（变动记录列表） - 第二个参数：
MutationObserver实例本身（用于disconnect()等）
即使你只关心变动，也建议显式写出参数，避免逻辑遗漏：
// ❌ 不推荐：丢失参数，mutations 是 undefined
new MutationObserver(() => { /* ... */ });
<p>// ✅ 推荐：明确接收，哪怕只用 mutations
new MutationObserver((mutations) => {
if (mutations.length > 0) { /<em> 处理 </em>/ }
});配合 async/await 时保持 observer 实例可用
若回调中需异步操作（如 fetch 后更新 UI），记得把 observer 实例传入或闭包持有，避免在 await 后无法调用 observer.disconnect() 或重复触发：
- 可在箭头函数外声明
let observer，再在回调中使用 - 或在异步操作完成后再检查是否仍需观察（例如加个标记
isWatching）
小技巧：用 observer.takeRecords() 清空待处理队列，避免积压。
