作者：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
五、总结
apply 和 call 是 JavaScript 中两个重要的函数方法，它们允许我们在调用函数时显式地设置 this，并传递参数。它们的区别在于参数传递方式：apply 使用数组，而 call 则是直接传递参数。在实际开发中，这两个方法经常用于显式绑定 this、借用方法、动态函数调用等场景。掌握它们可以提升代码的灵活性和可读性。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
其他热门文章，请关注：
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境
JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南
Dockerfile全面指南：从基础到进阶，掌握容器化构建的核心工具
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver
TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急
Idea启动SpringBoot程序报错：Port 8082 was already in use；端口冲突的原理与解决方案
PDF预览：利用vue3-pdf-app实现前端PDF在线展示
