JavaScript中this指向由函数调用方式决定:普通调用指向全局对象或undefined,对象方法调用指向该对象,构造调用指向新实例,显式绑定指向指定对象;箭头函数无this,继承外层。

JavaScript 中 this 指向谁,完全取决于「函数怎么被调用」
this 不是定义时决定的,也不是由函数本身决定的。它在每次函数执行时才绑定,绑定规则只看调用位置和方式。常见误解是认为 this 指向函数所在对象,但其实只要函数被“脱离上下文”调用,this 就会变。
四种主要调用方式决定 this 值
记住这四类,覆盖 95% 的实际场景:
-
普通函数调用:
fn()→ 非严格模式下this是window(浏览器)或globalThis(Node),严格模式下是undefined -
对象方法调用:
obj.method()→this是obj(前提是没被赋值或解构) -
构造函数调用:
new Fn()→this是新创建的实例对象 -
显式绑定:
fn.call(obj, ...)、fn.apply(obj, [...])、fn.bind(obj)→this强制为传入的obj
容易踩坑的三种典型场景
这些地方 this 最常“意外丢失”:
-
对象方法赋值给变量后调用:
const obj = { name: 'a', say() { console.log(this.name) } }; const fn = obj.say; fn(); // this 是 undefined(严格模式),输出 undefined —— 不是 'a' -
回调函数中直接使用对象方法:
button.addEventListener('click', obj.say); // 点击时 this 指向 button,不是 obj解决:用obj.say.bind(obj)、() => obj.say()或obj.say.bind(obj) -
箭头函数没有自己的
this:它会沿作用域链向上找外层函数的this,且无法被call/apply/bind改变
ES6 类方法里的 this 为什么有时也出问题?
类中的方法默认不自动绑定 this,尤其在作为事件处理器、定时器回调、或传入高阶函数(如 map、setTimeout)时,本质还是上面的「赋值后调用」问题:
立即学习“Java免费学习笔记(深入)”;
-
class C { handleClick() { console.log(this) } }; const c = new C(); setTimeout(c.handleClick, 100)→this是undefined(严格模式) - 修复方式:在 constructor 中绑定
this.handleClick = this.handleClick.bind(this),或用箭头属性handleClick = () => { ... },或调用时写成setTimeout(() => c.handleClick(), 100)
真正麻烦的不是规则多,而是你得时刻问自己一句:“这个函数此刻是被谁调用的?”——而不是“它写在哪儿”。











