JavaScriptthis指向详解与动态分析教程

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript this指向动态解析教程》，聊聊，我们一起来看看吧！

JavaScript 的 this 在函数调用时动态绑定，普通调用在非严格模式下指向全局对象（如 window），严格模式下为 undefined；箭头函数不绑定 this，继承外层普通函数的 this；call/apply/bind 可显式控制 this，class 方法需手动绑定或用箭头函数避免丢失。

JavaScript 的 this 不是在定义时决定的，而是在**函数被调用时**才动态绑定——这个“调用方式”直接决定 this 指向谁。

普通函数调用时的 this 指向哪里

在非严格模式下，独立调用（如 foo()）的 this 指向全局对象（浏览器中是 window）；严格模式下为 undefined。这是最容易踩坑的场景。

• 如果函数是从对象方法中提取后调用（比如 const fn = obj.method; fn();），this 会丢失，不再指向 obj
• 事件回调中直接写 onclick="handler()"，等价于普通调用，this 不是触发元素
• 定时器回调如 setTimeout(obj.method, 100) 同样丢失 this

箭头函数为什么没有自己的 this

箭头函数不绑定 this，它会沿作用域链向上查找外层第一个普通函数的 this 值。它不能通过 call/apply/bind 改变 this。

• 适合用在回调中避免 this 丢失，比如 arr.map(x => this.doSomething(x))
• 但不能用作构造函数（无 this 实例上下文），也不能作为对象方法依赖动态 this
• 注意：外层如果是普通函数且被错误调用（如上一条中的 fn()），箭头函数继承的 this 仍是错的

call、apply、bind 如何显式控制 this

三者都用于手动指定函数执行时的 this 值，区别只在参数传入方式：call 接散列参数，apply 接数组，bind 返回新函数并预设 this 和部分参数。

• func.call(obj, a, b) 等价于 func.apply(obj, [a, b])
• bind 返回的函数，即使后续再用 call，也无法覆盖最初绑定的 this（除非用 new 调用，但通常不推荐）
• 现代代码中，更推荐用 bind 或箭头函数替代频繁的 call/apply，可读性更高

class 方法中的 this 为什么有时失效

类中定义的方法默认不绑定 this，和对象字面量方法一样：只有作为方法调用（inst.method()）时 this 才正确；一旦被提取或传入回调，就失效。

• 常见写法：constructor() { this.handleClick = this.handleClick.bind(this); }
• 更简洁的写法：用类字段语法 + 箭头函数 handleClick = () => { ... }（需 Babel 或现代环境支持）
• 注意：Vue/React 等框架的生命周期或事件处理中，this 失效问题本质相同，解法也一致

真正难的不是记住规则，而是识别「调用发生在哪里」——哪怕只多一层包装（比如包进另一个函数、传给第三方库），this 就可能已变。调试时优先检查函数的调用表达式，而不是函数定义位置。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScriptthis指向详解与动态分析教程》文章吧，也可关注golang学习网公众号了解相关技术文章。