彻底明白 call 和 apply 背后的原理

2024-01-08 21:55:09

函数的 this 指向

在 JavaScript 中，函数的 this 指向是运行时决定的，它指向调用函数的对象。例如，当我们直接调用一个函数时，它的 this 指向是 window 对象。当我们使用一个对象调用一个函数时，它的 this 指向是该对象。

function hello() {
  console.log(this);
}

hello(); // 输出: Window {}

const obj = {
  name: 'John',
  hello: function() {
    console.log(this);
  }
};

obj.hello(); // 输出: {name: "John", hello: ƒ}

call 和 apply 方法

call 和 apply 方法允许开发者改变函数的 this 指向。这两个方法都有两个参数：第一个参数是想要改变 this 指向的对象，第二个参数是一个参数数组。

function hello(name) {
  console.log(`Hello, ${name}!`);
}

hello.call(obj, 'John'); // 输出: Hello, John!

hello.apply(obj, ['John']); // 输出: Hello, John!

call 和 apply 的区别在于，call 可以传递多个参数，而 apply 只需传递一个数组。在上面的示例中，call 方法传递了两个参数：obj 和 'John'。apply 方法也传递了两个参数，但它们都被封装在一个数组中：['John']。

使用场景

call 和 apply 方法在 JavaScript 中有很多使用场景。其中最常见的一个场景是代码重用。例如，我们可以在多个地方使用同一个函数，而无需复制代码。

function calculateArea(width, height) {
  return width * height;
}

const rectangleArea = calculateArea.call(null, 10, 20); // 200
const squareArea = calculateArea.apply(null, [10]); // 100

在上面的示例中，我们使用 call 和 apply 方法来重用 calculateArea 函数。我们只需要传递不同的参数，就可以得到不同形状的面积。

另一个常见的场景是解耦。例如，我们可以在一个对象中定义一个函数，然后在另一个对象中使用它。

const obj1 = {
  name: 'John',
  hello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const obj2 = {
  name: 'Mary'
};

obj1.hello.call(obj2); // 输出: Hello, Mary!