高阶函数中this丢失本质是方法脱离“对象.方法()”调用形式，导致运行时this指向undefined或全局对象；常见于map、filter、Promise.then、setTimeout等回调参数位置。
高阶函数中 this 丢失，本质是方法被当作普通值传入（比如作为参数交给 map、filter、setTimeout、Promise.then 等），脱离了“对象.方法()”的调用形式，导致运行时 this 不再指向原实例，而是 undefined（严格模式）或全局对象。
哪些高阶函数容易引发 this 丢失
常见于以下 API 的回调参数位置：
- 数组方法：map、filter、reduce、forEach、find 等的回调函数
- 异步处理：Promise.then/catch、setTimeout、setInterval、requestAnimationFrame
- 事件与监听器：addEventListener 的回调（虽非典型高阶函数，但调用机制类似）
- 工具库函数：如 Lodash 的 debounce、throttle、map、invoke 等接收函数作为参数的场景
一眼识别 this 是否已丢失
出现以下任一迹象，基本可判定 this 已丢失：
- 访问 this.xxx 报错
Cannot read property 'xxx' of undefined - 调用 this.method() 报错
is not a function（因 this 是 window 或 undefined） - 在调试器中打 log：
console.log(this)显示为Window（非严格）或undefined（严格） - 方法内部依赖实例状态（如
this.count、this.data），但输出始终是初始值或 NaN
用箭头函数修复（推荐多数场景）
箭头函数不绑定自己的 this，直接继承外层作用域的 this —— 只要定义位置在类/对象方法内，就能自然捕获实例上下文。
✅ 正确写法示例：
- list.map(item => this.format(item))
- promise.then(() => this.handleSuccess())
- setTimeout(() => this.tick(), 1000)
⚠️ 注意：不能用于 Vue Options API 的 methods 选项中（Vue 需要绑定 this 到组件实例），也不适用于需要 call/apply/bind 动态改 this 的场合。
用 bind 修复（适合需预设参数或复用绑定函数）
bind 返回一个新函数，this 被永久绑定到指定对象，还可预填部分参数。
✅ 正确写法示例：
- list.forEach(this.processItem.bind(this))
- setTimeout(this.update.bind(this, 'ready'), 500)（预设第一个参数 'ready'）
- button.addEventListener('click', this.handleClick.bind(this))
⚠️ 注意：每次 bind 都创建新函数，避免在 render 或循环中高频调用 bind；若需长期复用，建议在构造函数中一次性绑定。
