JavaScript中this的值取决于函数调用方式而非定义位置:普通调用时非严格模式指向全局对象、严格模式为undefined;对象方法调用时指向点号左侧对象;new调用时指向新实例;箭头函数不绑定this,继承外层词法作用域的this。

JavaScript 中的 this 不是固定绑定到函数或对象上的,它的值完全取决于函数「怎么被调用」,而不是「在哪定义」。
普通函数调用时,this 指向什么
在非严格模式下,直接调用函数(如 foo()),this 指向全局对象(浏览器中是 window,Node.js 中是 global);严格模式下为 undefined。
- 常见错误现象:
this在回调里突然变成window或undefined,比如事件监听、setTimeout、数组方法(map/forEach)中直接传入普通函数 - 解决方式:用箭头函数(不绑定
this,继承外层作用域)、显式绑定(bind/call/apply)、或改写为对象方法调用形式 - 注意:ES6 模块顶层的
this始终是undefined,不受严格模式影响
对象方法中,this 如何被确定
当函数作为对象属性被调用(如 obj.method()),this 指向该对象(即点号左边的对象)。
- 但一旦把方法单独提取出来(
const fn = obj.method;),就失去上下文,this不再指向obj - 类中的方法默认不会自动绑定
this,React 类组件中常因此报错Cannot read property 'xxx' of undefined - 使用
class fields + 箭头函数(如handleClick = () => { ... })可规避,因为箭头函数不创建自己的this
构造函数和 new 调用时,this 指向哪
用 new 调用函数时,this 指向新创建的实例对象,并且该函数会隐式返回这个对象(除非显式返回另一个对象)。
立即学习“Java免费学习笔记(深入)”;
- 如果忘记加
new,函数会以普通方式执行,this指向全局或undefined,极易导致意外挂载属性或静默失败 - 可通过检查
this是否为当前构造函数的实例来防御:if (!(this instanceof MyConstructor)) return new MyConstructor(...) - ES6
class构造器内部强制要求用new,否则抛出TypeError: Class constructor X cannot be invoked without 'new'
箭头函数为什么没有自己的 this
箭头函数不绑定 this,它直接沿用定义时所在词法作用域的 this 值,且无法通过 call/apply/bind 修改。
- 适合用于回调、闭包、事件处理器等需要保持外层
this的场景 - 不能用作构造函数(调用会报错
is not a constructor) - 与普通函数混用时要注意:嵌套箭头函数的
this是最外层非箭头函数的this,不是最近一层对象
真正难的不是记住规则,而是识别调用链中哪一环改变了 this 的绑定——尤其在高阶函数、异步流程、第三方库回调中。调试时优先检查函数是不是被“摘出来”单独调用了。











