this 的值取决于函数调用方式而非定义方式:普通调用指向全局对象或undefined,方法调用指向点号左侧对象,call/apply/bind/new 显式指定,箭头函数继承外层this。

this 的值不取决于函数怎么定义,而取决于它**怎么被调用**。直接看调用位置,比记规则更可靠。
普通函数调用时,this 指向全局对象(非严格模式)或 undefined(严格模式)
这是最容易踩坑的场景:单独写 foo(),没绑定、没作为方法、没用 call/apply/bind,就按这个规则走。
-
浏览器中非严格模式下,
this是window;Node.js 中是global - 严格模式下,
this就是undefined,不会自动绑定到全局 - 箭头函数没有自己的
this,它会沿作用域链向上找外层普通函数的this,而不是看调用方式
示例:
function say() {
console.log(this);
}
say(); // 非严格模式 → window;严格模式 → undefined
作为对象方法调用时,this 指向该对象
关键看点号(.)左边是谁:obj.method() 中的 this 就是 obj。
立即学习“Java免费学习笔记(深入)”;
- 只认“最后一次点调用”,
const fn = obj.method; fn()已经丢失绑定,退回到上一条规则 - 嵌套对象也一样:
obj.inner.fn()中this是inner,不是obj - 注意 getter/setter:在
get prop() { ... }里,this指向调用该 getter 的对象
使用 call/apply/bind 或 new 调用时,this 由显式指定或构造逻辑决定
这些是“强制指定”或“重置” this 的手段,优先级高于默认规则。
-
fn.call(obj, ...args)和fn.apply(obj, argsArray)立即执行,this设为obj -
fn.bind(obj)返回新函数,之后无论怎么调用,this都固定为obj -
new Fn()时,this是新创建的空对象,且函数返回值若为对象则覆盖 this,否则忽略 - 注意:箭头函数不能用
new,也不能被call/apply/bind改变this
事件处理函数和回调中,this 往往意外丢失
DOM 事件监听器默认把 this 绑定到触发事件的元素,但传入箭头函数或解构后调用就会打破它。
-
btn.addEventListener('click', handler)→this是btn -
btn.addEventListener('click', handler.bind(obj))→this是obj -
btn.addEventListener('click', () => handler())→this取决于handler内部怎么写,不是btn - 异步回调(如
setTimeout(handler, 100))同理:单独传函数名就丢失this
最稳妥的做法是:需要对象上下文时,显式绑定(.bind)、用箭头函数包装(() => obj.method()),或用 class 字段语法(handler = () => { ... })。
真正难的不是规则多,而是调用链里混了箭头函数、解构赋值、异步传递、class 方法提取——这时候光靠“记忆规则”容易错,不如在可疑位置加个 console.log(this) 看一眼实际值。











