七分钟入门 call、apply 和 bind

前言

在 JavaScript 中，call、apply 和 bind 都是用来改变函数调用的 this 指向和传递参数的函数。它们都采用后续传参的形式，即在函数名之后紧跟着括号，括号内包含要传递给函数的参数。

共同点

• 功能角度：三者都能改变 this 指向，且第一个传递的参数都是 this 指向的对象。
• 传参角度：三者都采用的后续传参的形式。

不同点

• call：call 方法接受两个或多个参数，第一个参数是 this 指向的对象，后面的参数是传递给函数的参数。
• apply：apply 方法也接受两个或多个参数，第一个参数是 this 指向的对象，第二个参数是一个数组，其中包含要传递给函数的参数。
• bind：bind 方法接受两个或多个参数，第一个参数是 this 指向的对象，后面的参数是传递给函数的参数。与 call 和 apply 不同的是，bind 方法不会立即执行函数，而是返回一个新的函数，该函数的 this 指向已经绑定到了第一个参数。

示例

以下是一个使用 call 方法的示例：

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

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

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

在这个示例中，我们定义了一个名为 greet 的函数，它接受一个参数 name 并打印一条包含该参数的欢迎消息。然后，我们创建了一个名为 person 的对象，其中包含一个名为 name 的属性，该属性的值为 'John Doe'。最后，我们使用 call 方法来调用 greet 函数，并将 person 对象作为 this 指向的对象，并将 'Jane Doe' 作为参数传递给 greet 函数。这将导致输出 "Hello, Jane Doe!"。

以下是一个使用 apply 方法的示例：

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

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

const args = ['Jane Doe'];

greet.apply(person, args); // Hello, Jane Doe!

在这个示例中，我们使用 apply 方法来调用 greet 函数，并将 person 对象作为 this 指向的对象，并将 args 数组作为参数传递给 greet 函数。这将导致输出 "Hello, Jane Doe!"。

以下是一个使用 bind 方法的示例：

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

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

const boundGreet = greet.bind(person);

boundGreet('Jane Doe'); // Hello, Jane Doe!

在这个示例中，我们使用 bind 方法来创建一个新的函数 boundGreet，该函数的 this 指向已经绑定到了 person 对象。然后，我们使用 boundGreet 函数来调用 greet 函数，并将 'Jane Doe' 作为参数传递给 greet 函数。这将导致输出 "Hello, Jane Doe!"。

结论

call、apply 和 bind 都是非常有用的函数，可以用来改变函数的 this 指向和传递参数。通过理解这些函数的异同，我们可以更好地利用它们来编写出更灵活、更易维护的 JavaScript 代码。