方法调用模式下this指向调用时点号左侧的对象;如user.getName()中this指向user,但fn=user.getName;fn()时this不再指向user,需用bind、箭头函数或call/apply修复。

JavaScript 中方法调用模式下,this 的指向由“谁调用该方法”决定——即调用时的**左侧对象**(点号前的对象)就是 this 的值。
方法调用模式的识别特征
当函数作为对象的属性被调用,且使用 obj.method() 这种带点号(.)或方括号([])的语法时,就属于方法调用模式。
- 关键看调用时的“主语”:例如
user.getName()中,user是主语,this指向user - 即使函数本身是普通函数,只要以
obj.fn()方式调用,就触发方法调用模式 - 注意:箭头函数没有自己的 this,它会沿作用域链向上找外层非箭头函数的 this,所以不适用此规则
常见易错场景
看似是方法调用,但实际丢失了调用主体,导致 this 指向意外改变:
-
const fn = obj.method; fn();→ 脱离对象调用,变成普通调用(非严格模式下 this 是window,严格模式下是undefined) -
setTimeout(obj.method, 100);→ 回调由全局环境执行,this 不再是obj - 事件监听器中:
btn.addEventListener('click', obj.handleClick);→ 点击时 this 是btn,不是obj(除非显式绑定)
如何确保 this 正确绑定
若需在分离后仍保持原始对象上下文,可用以下方式固定 this:
立即学习“Java免费学习笔记(深入)”;
- 使用
.bind(obj)显式绑定:const bound = obj.method.bind(obj); bound(); - 用箭头函数包裹(利用其继承外层 this):
() => obj.method() - 在调用时用
call/apply指定:obj.method.call(obj) - ES6 解构赋值 + 箭头函数常用于事件处理:
btn.addEventListener('click', () => obj.handleClick())
快速判断口诀
看到 . 或 [] 调用,先找点左边是谁;那个对象就是 this。如果点左边没了、或被赋给变量再调,那大概率不是原对象了。


















