JavaScript中this指向函数调用时的执行上下文对象,取决于调用者和调用方式:普通调用指向全局或undefined,对象方法调用指向该对象,call/apply/bind可显式绑定,箭头函数继承外层this,new调用指向新实例。

JavaScript 中的 this 不是指向函数本身,也不是定义时的作用域,而是**函数被调用时的执行上下文对象**——它的值完全取决于「谁调用了这个函数」以及「怎么调用的」。
普通函数调用时 this 指向全局或 undefined
在非严格模式下,直接调用函数(如 foo()),this 指向全局对象(浏览器中是 window);严格模式下则是 undefined。
- 常见错误现象:在回调、定时器、事件监听器里直接写
this.xxx,结果报Cannot read property 'xxx' of undefined - 原因:这些场景下函数是“裸调用”,
this丢失了原本想绑定的对象 - 解决思路:避免裸调用,改用
bind、箭头函数,或显式传参
对象方法调用时 this 指向调用者对象
当函数作为对象属性被调用(obj.method()),this 指向 obj。这是最直观也最容易依赖的绑定方式。
- 注意点:一旦把方法赋值给变量(
const fn = obj.method;),再调用fn()就变成普通调用,this脱离obj - 参数差异:
call/apply/bind可强制指定this,其中bind返回新函数,call和apply立即执行 - 性能影响:频繁用
bind创建新函数可能增加内存开销,类组件中建议在构造函数里绑定,而非渲染时
箭头函数没有自己的 this,沿用外层作用域的 this
箭头函数不绑定 this,它会向上一级非箭头函数作用域查找 this 值——这使它天然适合用在回调中保持上下文。
立即学习“Java免费学习笔记(深入)”;
- 使用场景:React 类组件的事件处理、
setTimeout、map回调等需要保持实例this的地方 - 容易踩的坑:在对象字面量中写箭头函数方法(
obj = { fn: () => this.x }),此时this是定义该对象时的外层this,不是obj本身 - 兼容性:ES6+ 支持,IE 不支持;若需兼容旧环境,不能依赖箭头函数解决
this问题
new 调用时 this 指向新创建的实例
用 new 调用构造函数时,引擎会自动创建空对象,并将 this 绑定到该对象,最后隐式返回它(除非显式返回其他对象)。
- 关键判断:如果函数内部有
this.xxx = yyy,且你希望它挂到实例上,就必须用new调用 - 常见错误:忘记写
new,导致this指向全局或undefined,属性意外挂到全局,或报错 - 可加防护:在构造函数开头检查
if (!(this instanceof MyConstructor)) return new MyConstructor(...)
真正难的不是记住四条规则,而是识别「调用形式是否被包装过」——比如 addEventListener 内部调用你的函数,本质上就是裸调用;Promise 的 then 回调也是。只要中间经过了第三方函数中转,this 就大概率丢失,得主动干预。











