重新认识javascript 基础中的 call, apply 和 bind

函数调用概述

在 JavaScript 中，函数调用可以有多种形式。最常见的是直接调用，即直接在函数名前加上括号并传递参数。例如：

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

greet('John'); // 输出: "Hello, John!"

然而，有时我们希望以不同的方式调用函数。例如，我们可能希望改变函数的 this 值、传递参数的方式或者创建一个新的函数。这就是 call、apply 和 bind 出场的地方。

call() 方法

call() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。语法如下：

function.call(thisArg, ...args)

第一个参数是 thisArg，指定要作为函数的 this 值的对象。第二个参数是可选的，它是一个包含要传递给函数的参数的数组。例如：

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

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

const anotherPerson = {
  name: 'Jane'
};

person.greet.call(anotherPerson); // 输出: "Hello, my name is Jane!"

在上面的示例中，我们使用 call() 方法改变了 greet() 函数的 this 值，使它在另一个对象上执行。

apply() 方法

apply() 方法与 call() 方法非常相似，但它以一个数组的形式传递参数，而不是一个一个地传递。语法如下：

function.apply(thisArg, argsArray)

第一个参数是 thisArg，指定要作为函数的 this 值的对象。第二个参数是 argsArray，它是一个包含要传递给函数的参数的数组。例如：

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

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

const anotherPerson = {
  name: 'Jane'
};

person.greet.apply(anotherPerson, ['Hi']); // 输出: "Hi, my name is Jane!"

在上面的示例中，我们使用 apply() 方法改变了 greet() 函数的 this 值，并传递了一个数组作为参数。

bind() 方法

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 值被绑定到第一个参数，而其余参数被绑定到后续的参数。语法如下：

function.bind(thisArg, ...args)

第一个参数是 thisArg，指定要作为新函数的 this 值的对象。第二个参数是可选的，它是一个包含要传递给新函数的参数的数组。例如：

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

const boundGreet = person.greet.bind(person);

boundGreet(); // 输出: "Hello, my name is John!"

在上面的示例中，我们使用 bind() 方法创建了一个新的函数 boundGreet，它将 greet() 函数的 this 值绑定到了 person 对象。当我们调用 boundGreet() 时，它将执行 greet() 函数，并将 person 对象作为 its this 值。

call、apply 和 bind 的实际应用

call、apply 和 bind 在实际项目中有很多应用场景。以下是一些常见的示例：

• 改变函数的 this 值：例如，我们可以使用 call() 或 apply() 方法来改变函数的 this 值，以便在另一个对象上执行它。这在需要在多个对象上共享代码时非常有用。
• 传递参数的方式：我们可以使用 apply() 方法以一个数组的形式传递参数，而不是一个一个地传递。这在需要传递大量参数时非常有用。
• 创建新的函数：我们可以使用 bind() 方法创建一个新的函数，它将函数的 this 值绑定到第一个参数，而其余参数被绑定到后续的参数。这在需要创建部分应用函数或柯里化函数时非常有用。

箭头函数与 call、apply 和 bind

箭头函数是一个 ES6 中引入的新特性，它提供了一种更简洁的函数定义方式。箭头函数没有自己的 this 值，因此它们不能使用 call()、apply() 和 bind() 方法。然而，我们可以使用箭头函数来模拟 call()、apply() 和 bind() 的行为。

以下是如何使用箭头函数模拟 call() 方法：

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

const boundGreet = (...args) => person.greet.call(person, ...args);

boundGreet(); // 输出: "Hello, my name is John!"

以下是如何使用箭头函数模拟 apply() 方法：

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

const boundGreet = (...args) => person.greet.apply(person, args);

boundGreet('Hello'); // 输出: "Hello, my name is John!"

以下是如何使用箭头函数模拟 bind() 方法：

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

const boundGreet = person.greet.bind(person);

boundGreet(); // 输出: "Hello, my name is John!"

结论

call()、apply() 和 bind() 是三个强大的工具，它们可以改变函数调用方式、传递参数的方式以及创建新的函数。它们在实际项目中有很多应用场景，例如改变函数的 this 值、传递参数的方式、创建新的函数等。箭头函数虽然没有自己的 this 值，但我们可以使用箭头函数来模拟 call()、apply() 和 bind() 的行为。