JavaScript中this指向函数调用时的上下文而非定义时环境；普通函数调用时非严格模式下指向全局对象，严格模式下为undefined；箭头函数无this，继承外层作用域。
JavaScript 中 this 不是指向函数定义时的环境，而是取决于函数「怎么被调用」——这是绝大多数困惑的根源。直接记「谁调用，this 就指向谁」在多数场景下可行，但箭头函数、事件回调、定时器、解构赋值等会打破直觉，必须靠机制理解。
普通函数调用时 this 指向全局或 undefined
在非严格模式下，独立调用 fn() 会让 this 指向 window（浏览器）或 global（Node.js）；严格模式下是 undefined。这和函数在哪定义完全无关。
- 常见错误：把对象方法赋给变量后调用，如
const handler = obj.handleClick; handler();→this失去绑定 - 避免方式：不用赋值再调用，改用
obj.handleClick()直接调用；或提前绑定：const handler = obj.handleClick.bind(obj); - 注意：类方法默认不自动绑定，React 类组件中常因此报
Cannot read property 'setState' of undefined
箭头函数没有自己的 this，沿作用域链向上找
箭头函数不创建执行上下文，this 值由外层第一个普通函数决定，且无法通过 call/apply/bind 修改。
- 适用场景：事件监听器中保持外层
this，比如button.addEventListener('click', () => this.handleClick()); - 陷阱：在对象字面量中写箭头函数方法，
this不指向该对象，而是外层作用域（通常是全局） - 对比：
function() {}有动态this，() => {}是静态词法this，二者不能混用替代
call / apply / bind 的区别与适用时机
三者都用于显式指定函数调用时的 this 值，但调用时机和参数形式不同。
立即学习“Java免费学习笔记（深入）”；
-
fn.call(obj, arg1, arg2)：立即执行，参数逐个传入 -
fn.apply(obj, [arg1, arg2])：立即执行，参数以数组传入（适合展开已知数组） -
fn.bind(obj, arg1)：返回新函数，不执行；常用于预设部分参数 + 绑定this（如事件处理器、setTimeout 回调） - 性能提示：频繁调用时，
bind创建新函数有开销；现代写法更倾向用箭头函数或 class 字段语法（handler = () => {}）替代
DOM 事件监听器中的 this 默认指向触发元素
原生 addEventListener 回调中，this 默认是绑定的 DOM 元素（即 event.currentTarget），不是全局对象，也不是组件实例。
- 常见误解：以为
this是当前组件，结果访问不到this.state或this.setState - 解决方式：
- 用箭头函数包裹：
el.addEventListener('click', () => this.handleClick()) - 用
bind：el.addEventListener('click', this.handleClick.bind(this)) - 使用
event.target获取点击的具体子元素，event.currentTarget获取绑定监听器的元素
- 用箭头函数包裹：
- 注意：jQuery 的
.on()回调中this也默认是 DOM 元素，逻辑一致
真正容易出问题的，不是 this 的规则本身，而是混合了多种绑定方式（比如类字段箭头函数 + 手动 bind + 事件委托），导致某处 this 突然变成 undefined 或意外对象。遇到问题时，优先打日志：console.log('this:', this);，而不是凭印象猜。
