JavaScript中this的指向详解

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript中this的指向解析【教程】》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

普通函数调用时，this在非严格模式下指向window或globalThis，严格模式下为undefined；对象方法赋值后调用会丢失this；箭头函数继承外层this；构造函数需用new调用，否则this指向错误。

JavaScript 中的 this 不是定义时绑定的，而是调用时决定的——它永远指向函数执行时的“当前对象”，但这个“当前对象”并不总是你直觉认为的那个。

普通函数调用时，this 指向谁？

在非严格模式下，全局环境或独立调用函数（如 foo()）时，this 指向 window（浏览器）或 globalThis（Node.js）；严格模式下则为 undefined。

• 常见错误现象：console.log(this) 在顶层函数里输出 Window，但你本意是想访问某个实例属性，结果报 Cannot read property 'x' of undefined
• 使用场景：工具函数、一次性逻辑封装，但若内部依赖 this，极易出错
• 实操建议：避免在普通函数中依赖 this；如需绑定上下文，显式传参或用箭头函数替代

对象方法中，this 为什么有时突然失效？

当把对象方法赋值给变量或作为回调传入（如 setTimeout(obj.method, 100)），this 会丢失原始绑定，退回到默认规则（即上一条）。

• 典型表现：obj.method() 正常，但 const fn = obj.method; fn() 报错或访问不到预期属性
• 参数差异：bind、call、apply 可强制指定 this，但 bind 返回新函数，call/apply 立即执行
• 实操建议：用 obj.method.bind(obj)，或改写为箭头函数（仅适用于不需动态 this 的场景），更推荐在类中用 class fields + arrow function 写法（如 handler = () => { ... }）

箭头函数没有自己的 this，那它怎么找？

箭头函数不创建自己的 this，而是沿作用域链向上查找，继承外层普通函数或全局作用域的 this 值。

• 使用场景：事件回调、定时器、Promise 链内需要保持上下文一致时（如 React 组件中处理点击）
• 容易踩的坑：Object.prototype 上定义的箭头函数无效（语法不允许）；构造函数不能是箭头函数（无 new.target，也无法用 new 调用）
• 性能影响：无额外 this 绑定开销，但过度嵌套可能让 this 来源变得隐晦难追踪

构造函数和 class 中，this 指向实例，但要注意什么？

new Foo() 或 class 实例化时，this 指向新创建的对象；但若忘记 new 直接调用，就退化成普通函数调用（严格模式下 this 是 undefined）。

• 常见错误：Foo() 被误调，导致 this.x = 1 实际挂到全局，或报错
• 实操建议：类方法尽量用 class fields + 箭头函数防丢失；构造函数首字母大写并配合 ESLint 规则 new-cap 提示
• 兼容性注意：class 本质仍是函数，但其方法不可枚举（for...in 不会遍历到），且不支持函数提升

真正难的不是记住规则，而是意识到：同一个函数，调用方式不同，this 就可能完全不同——而 JavaScript 不会在语法层面警告你这点。调试时多打 console.log(this)，比背规则更管用。

今天关于《JavaScript中this的指向详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！