揭秘JS三大函数：bind、call、apply 的精妙用法

2023-10-18 19:41:00

JS 函数中的执行上下文
在讨论 bind、call 和 apply 函数之前，我们需要先了解 JS 中的执行上下文。执行上下文是函数执行时所处的一个环境，它决定了函数中的 this 指向哪个对象，以及函数的局部变量和参数。

函数的执行上下文是在函数被调用时创建的，并且在函数执行完成时销毁。我们可以使用 Function.prototype.bind()、Function.prototype.call() 和 Function.prototype.apply() 这三个函数来改变函数的执行上下文，从而控制 this 关键字的指向。

bind() 函数

bind() 函数返回一个新的函数，该函数在调用时将把指定的 this 值作为第一个参数传入原函数。换句话说，bind() 可以用来改变函数的 this 指向。

语法：

bind(thisArg [, arg1, arg2, ...])

参数：

thisArg：新的 this 值。
arg1, arg2, ...：传递给新函数的参数。

返回值：

一个新的函数，该函数在调用时将把指定的 this 值作为第一个参数传入原函数。

例子：

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

const boundGreet = person.greet.bind(person);
boundGreet('Hello'); // 输出：Hello, John Doe!

在这个例子中，我们使用 bind() 函数将 person 对象作为 greet 函数的 this 值。当我们调用 boundGreet 函数时，this 将指向 person 对象，因此我们可以访问 person 对象的 name 属性。

call() 函数

call() 函数立即执行指定的函数，并将指定的 this 值作为第一个参数传入。换句话说，call() 可以用来改变函数的 this 指向并立即执行该函数。

语法：

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

参数：

thisArg：新的 this 值。
arg1, arg2, ...：传递给原函数的参数。

返回值：

原函数的返回值。

例子：

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

person.greet.call(person, 'Hello'); // 输出：Hello, John Doe!

在这个例子中，我们使用 call() 函数将 person 对象作为 greet 函数的 this 值并立即执行 greet 函数。当 greet 函数执行时，this 将指向 person 对象，因此我们可以访问 person 对象的 name 属性。

apply() 函数

apply() 函数与 call() 函数非常相似，但它以数组的形式传递参数给原函数。

语法：

apply(thisArg, [args])

参数：

thisArg：新的 this 值。
args：一个包含要传递给原函数的参数的数组。

返回值：

原函数的返回值。

例子：

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

const args = ['Hello'];
person.greet.apply(person, args); // 输出：Hello, John Doe!

在这个例子中，我们使用 apply() 函数将 person 对象作为 greet 函数的 this 值并立即执行 greet 函数。我们使用 args 数组来传递参数给 greet 函数。当 greet 函数执行时，this 将指向 person 对象，因此我们可以访问 person 对象的 name 属性。

这三个函数的比较

这三个函数都允许我们改变函数的 this 指向，但它们有各自的优缺点。

bind() 函数返回一个新的函数，该函数在调用时将把指定的 this 值作为第一个参数传入原函数。这使得 bind() 函数非常适合创建需要特定 this 值的函数。
call() 函数立即执行指定的函数，并将指定的 this 值作为第一个参数传入。这使得 call() 函数非常适合立即执行函数并控制 this 值。
apply() 函数与 call() 函数非常相似，但它以数组的形式传递参数给原函数。这使得 apply() 函数非常适合需要以数组形式传递参数的场景。