改变函数调用上下文：apply与call方法详解及实例

apply 和 call 是 JavaScript 中两个重要的函数方法，它们允许我们在调用函数时显式地设置 this，并传递参数。它们的区别在于参数传递方式：apply 使用数组，而 call 则是直接传递参数。在实际开发中，这两个方法经常用于显式绑定 this、借用方法、动态函数调用等场景。掌握它们可以提升代码的灵活性和可读性。

RenGJ010617

3341人浏览 · 2024-10-21 22:51:33

RenGJ010617 · 2024-10-21 22:51:33 发布

改变函数调用上下文：apply与call方法详解及实例

三、apply 和 call 的共同与差异

1、apply 和 call 的共同点

2、apply 和 call 的差异

四、apply 和 call 的其他实用技巧

1、使用 apply 扩展 Math 对象的功能

2、借用数组方法

3、模拟类继承

五、总结

作者：watermelo37

涉及领域：Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

改变函数调用上下文：apply与call方法详解及实例

JavaScript 提供了很多方法来增强函数的灵活性，其中 apply 和 call 是两个重要的函数方法。了解它们的使用场景和区别可以帮助我们更好地管理上下文（this）并提升代码的可读性。

一、什么是 apply 方法？

apply 方法是 JavaScript 函数对象的一个方法，它允许你在调用函数时，显式地指定函数内部的 this 值，并传入一个包含参数的数组或类数组对象。

1、apply 语法

func.apply(thisArg, [argsArray])

thisArg：调用函数时 this 指向的对象。
argsArray：一个数组或类数组对象，用于指定函数调用时的参数列表。

2、apply 示例

假设我们有一个函数 calculateArea，用于计算矩形的面积：

function calculateArea(length, width) {
  return length * width;
}

const dimensions = [10, 5];
const area = calculateArea.apply(null, dimensions);
console.log(area); // 输出：50

在这个例子中，apply 方法允许我们将数组 dimensions 作为参数传递给 calculateArea 函数。

二、什么是 call 方法？

与 apply 类似，call 方法也是一个 JavaScript 函数对象的内置方法。它允许我们在调用函数时指定 this 值，但不同的是，call 方法的参数是直接传递的，而不是作为数组。

1、call 语法

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

thisArg：调用函数时 this 指向的对象。
arg1, arg2, ...：要传递给函数的参数。

2、call 示例

用同样的 calculateArea 函数，我们可以通过 call 方法直接传递参数：

const area2 = calculateArea.call(null, 10, 5);
console.log(area2); // 输出：50

在这个例子中，call 方法通过逐个传递参数的方式调用了 calculateArea。

三、apply 和 call 的共同与差异

1、apply 和 call 的共同点

apply 和 call 方法都可以显式地设置 this，并立即调用函数。这使得它们非常适用于以下场景：

显式绑定 this：将函数借用到其他对象上，避免重新定义类似的函数。
动态调用函数：根据不同的参数或上下文来灵活调用函数。

2、apply 和 call 的差异

参数传递方式不同：这是 apply 和 call 之间的主要区别。
- apply 接收一个数组或类数组对象，将其中的值作为参数传递给函数。
- call 逐个接受参数，这些参数必须按顺序传递。
适用场景不同：
- 当参数已经在数组或类数组对象中时，apply 更加方便。
- 当参数数量和顺序明确时， call 方法更直接。

再举个对比的例子：

// 使用 apply 方法
function introduce(name, age) {
  console.log(`My name is ${name} and I am ${age} years old.`);
}

const personInfo = ["Alice", 25];
introduce.apply(null, personInfo); // 使用 apply 传递数组参数
//My name is Alice and I am 25 years old.

// 使用 call 方法
introduce.call(null, "Bob", 30); // 使用 call 直接传递参数
//My name is Bob and I am 30 years old.

在上述例子中，apply 使用数组传递参数，而 call 方法直接传递了两个参数。

四、apply 和 call 的其他实用技巧

1、使用 apply 扩展 Math 对象的功能

通过 apply 方法，可以轻松地将数组传递给 Math.max 或 Math.min 函数，求出数组的最大或最小值

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max); // 输出：7

const min = Math.min.apply(null, numbers);
console.log(min); // 输出：2

Tips：在 apply 与 call 方法中，null的作用，是将this指向变成null，还是代表没有传入新的this指向，原指向不变呢？

答：null 只是占位符，并不影响 this 的实际指向。

2、借用数组方法

因为 arguments 对象是类数组的，我们可以借用数组方法将其转化为真正的数组。例如，使用 Array.prototype.slice.call 方法将 arguments 转化为数组：

function listArgs() {
  const args = Array.prototype.slice.call(arguments);
  console.log(args);
}

listArgs(1, 2, 3, 4); // 输出：[1, 2, 3, 4]

3、模拟类继承

可以使用 call 来将父类的构造函数借用到子类上，从而实现继承。以下是一个简单的示例：

function Person(name) {
  this.name = name;
}

function Student(name, age) {
  Person.call(this, name); // 使用 call 将 Person 的构造函数借用到 Student 中
  this.age = age;
}

const student1 = new Student("Tom", 20);
console.log(student1.name); // 输出：Tom
console.log(student1.age);  // 输出：20