应根据场景选择 this 绑定方式：嵌套函数中用 self = this 捕获外层 this；需复用或预设参数时用 bind 永久绑定；现代开发优先用箭头函数继承词法 this，避免手动绑定。
JavaScript 中 this 指向混乱，本质是函数调用方式决定的，不是定义位置。保存 self = this 或用 bind 都是绕过运行时绑定的“兜底方案”，但适用场景和原理不同，选错反而加重混乱。
什么时候该用 self = this（或 that = this）
主要解决**嵌套函数中 this 丢失**的问题，尤其是回调函数里需要访问外层实例属性或方法时。它靠的是闭包捕获外层作用域的 this 值。
- 常见于事件监听、定时器、Ajax 回调、Promise.then 等异步操作内部
- 适用于传统 function 声明（箭头函数不需要）
- 注意：只在函数执行前赋值一次，适合
this在外层确定且不变的场景
例如：
const obj = {name: 'Alice',
sayHi() {
const self = this; // 捕获当前 this
setTimeout(function() {
console.log('Hello, ' + self.name); // 正确输出 Alice
}, 100);
}
};
什么时候该用 bind
bind 是显式绑定 this，返回一个新函数，**永久锁定 this 值**。适合需要复用、传递或延迟执行的函数。
立即学习“Java免费学习笔记（深入）”；
- 常用于将对象方法作为事件处理器传入（如
btn.addEventListener('click', obj.handleClick.bind(obj))） - 适合需要预设部分参数（柯里化）同时固定
this的情况 - 注意：每次
bind都创建新函数，避免在 render 或循环中频繁调用，可能影响性能或导致 React 中的重复渲染
例如：
const obj = {count: 0,
increment() { this.count++; }
};
const btn = document.querySelector('#btn');
btn.addEventListener('click', obj.increment.bind(obj)); // this 始终指向 obj
更现代、更推荐的替代方案
ES6+ 提供了更简洁、不易出错的方式，优先考虑它们：
-
箭头函数：没有自己的
this，自动继承外层词法作用域的this。适用于回调、Promise、setTimeout 内部 -
类字段语法 + 箭头函数（React 类组件常用）：
handleClick = () => { ... }，天然绑定实例 -
bind 在构造函数中提前绑定（避免每次 render 创建新函数）：
this.handleClick = this.handleClick.bind(this)
例如（箭头函数版）：
const obj = {name: 'Alice',
sayHi() {
setTimeout(() => {
console.log('Hello, ' + this.name); // this 正确指向 obj
}, 100);
}
};
关键提醒：别混淆 bind 和 call/apply
bind 返回函数，不立即执行；call 和 apply 是立即调用并临时绑定 this。误用 call 替代 bind 是常见错误——比如写成 obj.method.call(obj) 传给事件监听器，结果是立刻执行，而不是等点击时执行。
- 要“绑定后传递” → 用
bind - 要“立刻绑定并执行” → 用
call或apply - 要“保留 this 且复用逻辑” → 优先用箭头函数或类字段
