javascript_this关键字的绑定规则

this的指向由运行时动态确定,遵循四种绑定规则:1. 默认绑定指独立函数调用时this指向全局对象(严格模式下为undefined);2. 隐式绑定指函数作为对象方法调用时this指向该对象,但赋值后调用会丢失绑定;3. 显式绑定通过call、apply或bind手动指定this值,其中call和apply立即执行,bind返回新函数;4. new绑定指使用new调用构造函数时this指向新创建的对象。优先级顺序为:new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。

JavaScript 中 this 的指向问题常常让开发者感到困惑,其实它的绑定遵循一套明确的规则。this 的值不是在函数定义时决定的,而是在函数运行时动态确定的。理解 this 的绑定规则,关键在于掌握四种绑定方式:默认绑定、隐式绑定、显式绑定和 new 绑定。

1. 默认绑定(Default Binding)

这是最基础的绑定规则,适用于独立函数调用的情况。

当一个函数被直接调用,没有上下文对象时,this 指向全局对象(在浏览器中是 window,在严格模式下为 undefined)。

例如:
function sayHi() {
  console.log(this);
}
sayHi(); // 非严格模式下输出 window,严格模式下输出 undefined

2. 隐式绑定(Implicit Binding)

当函数作为对象的方法被调用时,this 指向该对象。

注意:只有最后一层引用才起作用。

例如:
const person = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};
person.greet(); // 输出 'Alice',this 指向 person

如果将方法赋值给变量再调用,会丢失绑定:

const fn = person.greet;
fn(); // 输出 undefined(非严格模式可能是 window),this 不再指向 person

3. 显式绑定(Explicit Binding)

通过 call、apply 或 bind 方法,可以手动指定函数执行时的 this 值。

  • call:立即执行函数,参数依次传入
  • apply:立即执行函数,参数以数组形式传入
  • bind:返回一个新函数,this 被永久绑定
例如:
function introduce(age) {
  console.log(`I'm ${this.name}, ${age} years old`);
}
const user = { name: 'Bob' };
introduce.call(user, 25); // 输出 "I'm Bob, 25 years old"
introduce.apply(user, [30]); // 输出 "I'm Bob, 30 years old"
const boundFn = introduce.bind(user);
boundFn(28); // 输出 "I'm Bob, 28 years old"

4. new 绑定(New Binding)

使用 new 关键字调用函数(构造函数)时,会创建一个新对象,this 指向这个新对象。

例如:
function Person(name) {
  this.name = name; // this 指向 new 创建的对象
}
const p = new Person('Charlie');
console.log(p.name); // 输出 'Charlie'

这四种绑定规则有优先级:new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定。只要记住这个顺序,就能准确判断 this 的指向。

基本上就这些,不复杂但容易忽略细节。