函数中的this指针——从头剖析到尾

2024-02-03 03:48:37

前言

在 JavaScript 中，理解this指针至关重要。它决定了函数执行时，this指向的对象。掌握this指针的绑定规则，将大大提升你的代码质量和可读性。

1. 绑定规则

JavaScript 中的this指针遵循三条绑定规则：

1.1. 默认绑定

如果函数作为对象的方法调用，this指向调用该方法的对象。
案例一：

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

obj.greet(); // 输出：Hello, my name is John.

案例二：

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const john = new Person('John');
john.greet(); // 输出：Hello, my name is John.

案例三：

const name = 'Jane';

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出：Hello, my name is undefined.

1.2. 隐式绑定

如果函数作为普通函数调用，this指向全局对象（在浏览器中为window对象）。
案例一：

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出：Hello, my name is undefined.

案例二：

const obj = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

obj.greet.call(null); // 输出：Hello, my name is undefined.

1.3. 显式绑定

可以使用call()、apply()或bind()方法显式绑定this指针。
call/apply/bind：

const obj = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

obj.greet.call({ name: 'Jane' }); // 输出：Hello, my name is Jane.
obj.greet.apply({ name: 'Jane' }); // 输出：Hello, my name is Jane.
const boundGreet = obj.greet.bind({ name: 'Jane' });
boundGreet(); // 输出：Hello, my name is Jane.