Function.prototype.call()和apply()的奇妙对比：鱼与熊掌兼得

2023-12-13 23:27:15

Function.prototype.call()和Function.prototype.apply()是JavaScript中用来调用函数的两个常用方法。它们允许我们以不同的方式指定函数的this值和参数。这两种方法都有各自的优点和缺点，在不同的情况下使用它们可以达到不同的效果。

call()方法

call()方法接收两个参数：第一个参数是this值，第二个参数是一个参数列表。call()方法会将this值设置为第一个参数，并将参数列表中的参数传递给函数。

示例：

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

greet("John"); // Hello, John!

const person = {
  name: "Jane"
};

greet.call(person, "Jane"); // Hello, Jane!

在上面的示例中，我们首先定义了一个名为greet的函数，该函数接受一个name参数并打印一条问候信息。然后，我们调用greet函数，并将"John"作为参数传递给它。这将打印出"Hello, John!"。

接下来，我们定义了一个名为person的对象，并给它一个name属性，其值为"Jane"。然后，我们使用call()方法调用greet函数，并将person对象作为this值传递给它。这将打印出"Hello, Jane!"。

apply()方法

apply()方法接收两个参数：第一个参数是this值，第二个参数是一个数组，其中包含要传递给函数的参数。apply()方法会将this值设置为第一个参数，并将数组中的参数传递给函数。

示例：

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

greet("John"); // Hello, John!

const person = {
  name: "Jane"
};

greet.apply(person, ["Jane"]); // Hello, Jane!

接下来，我们定义了一个名为person的对象，并给它一个name属性，其值为"Jane"。然后，我们使用apply()方法调用greet函数，并将person对象作为this值传递给它。同时，我们创建一个数组，其中包含要传递给函数的参数，然后将该数组作为第二个参数传递给apply()方法。这将打印出"Hello, Jane!"。