JavaScript 中的 call()、apply() 和 bind() 函数详解

2023-11-04 02:38:14

JavaScript 中的 this 指向

在 JavaScript 中，this 指向当前执行函数的对象。当一个函数作为对象的方法被调用时，this 指向该对象；当一个函数作为独立函数被调用时，this 指向 window 对象（在严格模式下为 undefined）。

例如：

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

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

在这个例子中，greet() 方法被作为 person 对象的方法调用，因此 this 指向 person 对象，person.name 的值为 'John Doe'。

call() 函数

call() 函数允许您显式地设置函数的 this 指向。它的语法如下：

function.call(thisArg, arg1, arg2, ...)

其中：

function：要调用的函数。
thisArg：要设置的 this 指向。
arg1, arg2, ...：要传递给函数的参数。

例如：

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

在这个例子中，greet() 函数被作为独立函数调用，因此 this 指向 window 对象（在严格模式下为 undefined）。但是，我们通过使用 call() 函数显式地将 this 指向设置为 person 对象，因此 greet() 函数内部的 this 指向 person 对象，person.name 的值为 'John Doe'。

apply() 函数

apply() 函数与 call() 函数类似，但它允许您将参数作为数组传递给函数。它的语法如下：

function.apply(thisArg, [arg1, arg2, ...])

其中：

function：要调用的函数。
thisArg：要设置的 this 指向。
[arg1, arg2, ...]：要传递给函数的参数数组。

例如：

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

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

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

在这个例子中，greet() 函数被作为独立函数调用，因此 this 指向 window 对象（在严格模式下为 undefined）。但是，我们通过使用 apply() 函数显式地将 this 指向设置为 person 对象，并使用数组 ['John Doe'] 将参数传递给 greet() 函数，因此 greet() 函数内部的 this 指向 person 对象，person.name 的值为 'John Doe'。

bind() 函数

bind() 函数与 call() 和 apply() 函数不同，它不会立即调用函数，而是返回一个新的函数，该函数的 this 指向已经绑定到指定的对象。它的语法如下：

function.bind(thisArg)

其中：

function：要绑定的函数。
thisArg：要设置的 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

在这个例子中，greet() 函数被作为独立函数调用，因此 this 指向 window 对象（在严格模式下为 undefined）。但是，我们通过使用 bind() 函数将 greet() 函数绑定到 person 对象，因此返回的新函数 boundGreet() 的 this 指向 person 对象，person.name 的值为 'John Doe'。

call()、apply() 和 bind() 函数的区别

call() 和 apply() 函数立即调用函数，而 bind() 函数不会立即调用函数，而是返回一个新的函数。
call() 函数允许您显式地设置函数的 this 指向，并使用逗号分隔的参数列表传递参数。
apply() 函数允许您显式地设置函数的 this 指向，并使用数组将参数传递给函数。
bind() 函数允许您显式地设置函数的 this 指向，并返回一个新的函数，该函数的 this 指向已经绑定到指定的对象。

call()、apply() 和 bind() 函数的应用场景

call() 和 apply() 函数可用于在不同的上下文中调用函数。 例如，您可以使用 call() 或 apply() 函数将一个函数作为另一个函数的参数来调用，或者您可以使用 call() 或 apply() 函数将一个函数作为回调函数来调用。
bind() 函数可用于创建新的函数，该函数的 this 指向已经绑定到指定的对象。 这对于创建事件处理程序和回调函数非常有用。例如，您可以使用 bind() 函数将一个函数绑定到一个特定的元素，以便当该元素发生事件时调用该函数。