JavaScript中this在函数调用时动态确定，受普通调用、方法调用、构造调用、显式绑定四种方式影响；箭头函数无this，继承外层普通函数的this值。
JavaScript 中的 this 容易混淆，根本原因在于它**不绑定在函数定义时，而是在函数调用时动态确定**，且规则看似简单、实则受调用方式多重影响。同一个函数，换一种调用写法，this 就可能指向完全不同对象。
四种常见调用方式决定 this 指向
理解 this 的核心是看函数「怎么被调用」：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
-
普通函数调用（如
fn()）：非严格模式下 this 指向全局对象（浏览器中是window），严格模式下为undefined； -
方法调用（如
obj.method()）：this 指向点号前的对象（obj）； -
构造函数调用（如
new Fn()）：this 指向新创建的实例； -
显式绑定调用（
call/apply/bind）：this 由第一个参数强制指定。
箭头函数没有自己的 this
箭头函数不绑定 this，它会沿作用域链向上查找外层普通函数的 this 值，并永久固定——这既是它的优势（避免手动绑定），也是陷阱（无法用 call 改变）。
例如：const obj = {<br> name: 'Alice',<br> normal() { console.log(this.name); },<br> arrow: () => console.log(this.name)<br>};<br>obj.normal(); // 'Alice'<br>obj.arrow(); // undefined（this 指向全局或模块顶层）
常用 this 绑定方法及适用场景
- bind：返回一个新函数，this 被永久绑定，适合需要预设上下文并延迟执行的场景（如事件回调、定时器）；
- call / apply：立即执行，适合临时借用方法（如数组方法处理类数组对象）；
-
class 中的属性箭头函数（
handler = () => {...}）：自动绑定实例，避免 React 等框架中事件处理器丢失 this； -
显式传入上下文：在回调中把 this 作为参数传递（如
arr.forEach(cb, this)），简洁安全。
现代开发中的实用建议
- 优先使用箭头函数处理回调，尤其在 class 内部；
- 避免在对象方法中直接传函数引用（如
setTimeout(obj.method, 100)），改用bind或箭头函数包装； - 在严格模式下开发，让错误更早暴露（普通调用时 this 为
undefined而非意外指向window）； - 借助 TypeScript 或 ESLint（如
no-invalid-this）辅助检测潜在问题。
