JavaScript中的apply和call方法|极客笔记

JavaScript中的apply和call方法

1. 介绍

在JavaScript中，apply和call是Function对象的两种方法。它们允许我们在特定的作用域中调用函数，并可以传递参数。这两个方法的作用基本相同，唯一的区别在于传参的方式。在本文中，我们将深入探讨apply和call的用法，并给出一些示例代码作为说明。

2. apply方法

2.1 语法

apply方法的语法如下：

function.apply(thisArg, [argumentsArray])

function: 需要调用的函数。
thisArg: 可选的。在函数function上下文中使用的this值。
argumentsArray: 可选的。一个数组或类数组对象，其中包含将被传递给函数的参数。

2.2 示例

考虑以下函数：

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

我们可以使用apply方法调用该函数：

greeting.apply(null, ['Alice']);

输出为：

Hello, Alice!

在上述代码中, apply方法接收两个参数，第一个参数是null，表示在全局作用域中调用函数greeting。第二个参数是一个包含一个元素的数组[‘Alice’]，该元素作为参数传递给函数。

3. call方法

3.1 语法

call方法的语法如下：

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

function: 需要调用的函数。
thisArg: 可选的。在函数function上下文中使用的this值。
arg1, arg2, …: 可选的。传递给函数的参数。

3.2 示例

我们可以使用call方法调用相同的函数：

greeting.call(null, 'Bob');

输出为：

Hello, Bob!

与apply方法类似，call方法接收一个参数null，表示在全局作用域中调用函数greeting。后续的参数直接传递给函数作为参数。

4. 与bind方法的比较

除了apply和call，JavaScript还提供了bind方法。与apply和call不同，bind方法返回一个新的函数，而不是立即调用它。

4.1 示例

考虑以下函数：

function multiply(a, b) {
  return a * b;
}

我们可以使用bind方法创建一个新的函数double，将其绑定到multiply函数的上下文：

const double = multiply.bind(null, 2);
console.log(double(3));

输出为：

在上述代码中，使用bind方法将multiply函数绑定到一个上下文为null的新函数double上。绑定时，传递了一个参数2，它将作为multiply函数的第一个参数。随后调用新函数double，传递了参数3，作为multiply函数的第二个参数。

5. 使用场景

5.1 改变函数的上下文

apply和call方法经常用于改变函数的上下文。通过改变函数的上下文，我们可以更改函数内部this关键字的指向。

考虑以下示例：

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

const anotherPerson = {
  name: 'Alice'
};

person.greet.apply(anotherPerson);

输出为：

Hello, Alice!

在上述代码中，通过使用apply方法，将函数greet的上下文从person对象改变为anotherPerson对象。此时，函数内部的this关键字指向了anotherPerson，所以输出为”Hello, Alice!”。

5.2 借用其他函数

在某些情况下，我们可能希望使用一个函数对象调用另一个函数对象，并且在第二个函数中引用第一个函数的属性和方法。在这种情况下，我们可以使用apply或call方法。

考虑以下示例：

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

const toy = new Toy('Teddy Bear', 20);
console.log(toy.name); // Teddy Bear
console.log(toy.price); // 20
console.log(toy.category); // toy

在上述代码中，我们定义了一个构造函数Product和一个子构造函数Toy。通过调用Product构造函数来初始化Toy对象的属性。使用call方法，将Toy对象的上下文传递给Product函数，以便在Product函数中引用Toy对象的属性。

6. 总结

在本文中，我们详细介绍了JavaScript中apply和call两种方法的用法。它们允许我们在指定的作用域中调用函数，并传递参数。apply方法使用一个数组或类数组对象作为参数，而call方法使用多个参数。我们还与bind方法进行了比较，并给出了一些使用示例。最后，我们探讨了使用apply和call的两个主要场景，即改变函数的上下文和借用其他函数的属性和方法。