JavaScript中this指向由调用上下文决定,可通过call/apply/bind显式绑定、箭头函数词法继承、对象方法隐式绑定、new构造函数绑定四种方式控制。

在 JavaScript 中,this 的指向不是由函数定义时决定的,而是由**函数调用时的上下文**决定的。要改变 this 的指向,核心思路是:**控制函数执行时的调用对象**。以下是几种常用且实用的方法:
1. 使用 call、apply、bind 显式绑定 this
这三个方法都属于函数对象的内置方法,能直接指定 this 指向哪个对象。
-
call(obj, arg1, arg2, ...):立即执行函数,
this指向obj,参数逐个传入 -
apply(obj, [arg1, arg2, ...]):立即执行函数,
this指向obj,参数以数组形式传入 -
bind(obj, arg1, arg2, ...):返回一个新函数,
this永久绑定为obj,不立即执行(常用于事件回调、定时器等场景)
例如:
const obj = { name: 'Alice' };function greet(age) { console.log(`I'm ${this.name}, ${age} years old`); }
greet.call(obj, 25); // I'm Alice, 25 years old
greet.bind(obj, 25)(); // 同样输出
2. 使用箭头函数自动继承外层 this
箭头函数没有自己的 this,它会沿作用域链向上查找,使用定义时所在上下文的 this 值(即“词法绑定”)。
立即学习“Java免费学习笔记(深入)”;
适用于解决回调中 this 丢失问题,比如定时器、事件监听、Promise 回调等:
name: 'Bob',
sayHi() {
setTimeout(() => {
console.log(`Hi, I'm ${this.name}`); // 正确输出 Bob
}, 100);
}
};
注意:不能用 call/apply/bind 改变箭头函数的 this,因为它无视这些调用方式。
3. 通过对象方法调用隐式绑定 this
当函数作为对象的属性被调用时(obj.method()),this 自动指向该对象。
这是最自然的 this 绑定方式,但要注意避免“函数赋值后丢失 this”:
name: 'Charlie',
getName() { return this.name; }
};
const fn = obj.getName;
fn(); // undefined —— this 指向全局或 undefined(严格模式)
// 修复方式:
const fn2 = obj.getName.bind(obj);
const fn3 = () => obj.getName();
const fn4 = obj.getName.bind(obj);
4. 使用 new 调用构造函数绑定 this
用 new 调用函数时,会创建一个新对象,this 指向这个新实例。
这是面向对象编程中初始化实例属性和方法的基础机制:
function Person(name) {this.name = name;
this.say = function() { console.log(`I'm ${this.name}`); };
}
const p = new Person('David');
p.say(); // I'm David
此时 this 不可被外部 call/bind 等修改(除非手动覆盖原型上的方法)。










