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

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

在JavaScript开发中，函数的调用方式和上下文管理是至关重要的技能。本文将深入探讨apply和call这两个强大的函数方法，它们允许我们显式地控制函数调用时的this值，并提供灵活的参数传递方式。通过本文的学习，你将掌握如何在实际开发中运用这些技巧，提升代码的灵活性和可读性。

什么是 apply 方法？

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

apply 语法

func.apply(thisArg, [argsArray])

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

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 方法的参数是直接传递的，而不是作为数组。

call 语法

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

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

call 示例

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

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

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

apply 和 call 的共同与差异

共同点

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

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

差异

• 参数传递方式不同：这是 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

总结

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

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~