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

目录

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

一、什么是 apply 方法？

1、apply 语法

2、apply 示例

二、什么是 call 方法？

1、call 语法

 2、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); // 输出：7const 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、借用方法、动态函数调用等场景。掌握它们可以提升代码的灵活性和可读性。

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

        其他热门文章，请关注：

        你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

        el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

        在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境

        干货含源码！如何用Java后端操作Docker（命令行篇）

        JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南

        Dockerfile全面指南：从基础到进阶，掌握容器化构建的核心工具

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

        TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急

        Idea启动SpringBoot程序报错：Port 8082 was already in use；端口冲突的原理与解决方案

        PDF预览：利用vue3-pdf-app实现前端PDF在线展示