理解 this 指向、掌握 call/apply/bind 精髓 08

2023-11-25 20:40:11

理解 this 指向

在 JavaScript 中，this 指向当前执行代码的对象。在大多数情况下，this 的值由函数的调用方式决定。

默认绑定： 当一个函数作为对象的方法被调用时，this 指向该对象。例如：

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

person.greet(); // 输出: Hello, my name is John Doe.

隐式绑定： 当一个函数作为普通函数被调用时，this 指向全局对象。在严格模式下，this 为 undefined。例如：

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

greet(); // 输出: Uncaught TypeError: Cannot read property 'name' of undefined

显式绑定： 通过使用 call、apply 或 bind 方法，可以显式地将 this 指向指定的对象。例如：

const person = {
  name: "John Doe"
};

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

greet.call(person); // 输出: Hello, my name is John Doe.

call、apply 和 bind 方法

call、apply 和 bind 方法都是用于显式绑定 this 指向的。它们的区别在于参数的传递方式。

call： 将 this 指向指定的对象，并以逗号分隔的形式传递参数。例如：

const person = {
  name: "John Doe"
};

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

greet.call(person, "Jane Doe"); // 输出: Hello, my name is Jane Doe.

apply： 将 this 指向指定的对象，并以数组的形式传递参数。例如：

const person = {
  name: "John Doe"
};

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

greet.apply(person, ["Jane Doe"]); // 输出: Hello, my name is Jane Doe.

bind： 将 this 指向指定的对象，并返回一个新的函数，该函数可以稍后调用，而无需显式地传入 this 指向。例如：

const person = {
  name: "John Doe"
};

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

const boundGreet = greet.bind(person);

boundGreet(); // 输出: Hello, my name is John Doe.