乐清手机网站,建设人力资源网官网,一个网站同时做百度和360推广吗,济南高风险区最新通告目录
改变函数调用上下文#xff1a;apply与call方法详解及实例
一、什么是 apply 方法#xff1f;
1、apply 语法
2、apply 示例
二、什么是 call 方法#xff1f;
1、call 语法 2、call 示例
三、apply 和 call 的共同与差异
1、apply 和 call 的共同点
2、apply…目录
改变函数调用上下文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); // 输出2Tips在 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在线展示
