JavaScript的this由调用方式决定而非定义位置，导致obj.fn()与fn()中this不同；常见于setTimeout、事件绑定、解构赋值等场景；箭头函数继承外层this；bind/call/apply可显式控制this但用法各异。
为什么 this 在函数里经常不是你想要的那个对象
因为 JavaScript 的 this 不由函数定义位置决定，而由**调用方式**决定。同一个函数，obj.fn() 和 fn() 里 this 可能完全不同——这是最常踩的坑根源。
常见错误现象：setTimeout(obj.method, 100) 或事件绑定后方法里 this 变成 window（非严格模式）或 undefined（严格模式）；对象解构后调用 const { method } = obj; method() 丢失上下文。
- 箭头函数不绑定自己的
this，它继承外层作用域的this值 - 普通函数每次调用都会根据「谁点的」重新计算
this，没有记忆性 - 类方法在类体中定义时，默认是普通函数，不是自动绑定的
bind、call、apply 的区别和适用场景
三者都能显式指定 this，但调用时机和参数传入方式不同：
-
fn.call(obj, arg1, arg2)：立即执行，参数逐个列出 -
fn.apply(obj, [arg1, arg2])：立即执行，参数以数组形式传入 -
const boundFn = fn.bind(obj, arg1)：返回新函数，不立即执行；后续调用时this固定为obj，且预置了部分参数（柯里化）
性能影响：频繁用 bind 创建新函数可能增加内存开销；call/apply 每次都执行，适合一次性委托。
立即学习“Java免费学习笔记（深入）”；
const logger = {
prefix: 'APP',
log: function(msg) {
console.log(`[${this.prefix}] ${msg}`);
}
};
logger.log('start'); // [APP] start
const looseLog = logger.log;
looseLog('oops'); // [undefined] oops ← this 失效
looseLog.call(logger, 'fixed'); // [APP] fixed
looseLog.apply(logger, ['also fixed']); // [APP] also fixed
const boundLog = looseLog.bind(logger);
boundLog('bound'); // [APP] bound
React 类组件中 this 绑定的三种写法及取舍
类组件的事件处理器（如 onClick={this.handleClick}）若未绑定，this 会丢失。主流写法有：
- 构造器中
this.handleClick = this.handleClick.bind(this)：明确、兼容性好，但需手动写每处 - 类字段语法（箭头函数）
handleClick = () => { ... }：简洁，但每次实例化都会创建新函数，可能影响shouldComponentUpdate或React.memo判断 - 模板内内联写法
onClick={() => this.handleClick()}：最危险——每次 render 都新建函数，必然触发子组件重渲染
注意：useCallback 是函数组件中对应的安全替代方案，但类组件没有等价物，所以推荐前两种之一，避免第三种。
ES6 类方法默认不绑定，addEventListener 里怎么安全传参
直接写 el.addEventListener('click', obj.method) 会导致 this 指向 el 而非 obj。正确做法不是靠 bind 硬绑，而是利用事件机制本身：
- 用箭头函数包装：
el.addEventListener('click', () => obj.method())—— 注意闭包引用和内存泄漏风险 - 用
handleEvent接口：让对象实现handleEvent(e)方法，并直接传对象本身：el.addEventListener('click', obj)，此时this就是obj - 更现代的做法：用
AbortController配合once: true等选项控制生命周期，避免手动removeEventListener遗漏
容易被忽略的一点：DOM 元素上的 onclick="handler()" 内联写法，this 指向该元素，且无法访问外部作用域变量——这种写法基本应弃用。
