深入理解 apply()方法
apply(thisArg)
apply(thisArg, argsArray)
thisArg
在 func 函数运行时使用的 this 值。请注意,this 可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。
argsArray 可选
一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined,则表示不需要传入任何参数。从 ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。
返回值
调用有指定 this 值和参数的函数的结果。
1.数组合并用法
const arr1 = ["anan", "zooey"];
const arr2 = [198, 246, 357];
//1.1 apply()
arr1.push.apply(arr1, arr2);
// console.log(arr1);//['anan','zooey',198,246,357]
//1.2call()
arr1.push.call(arr1, ...arr2);
// console.log(arr1);//['anan','zooey',198,246,357]
//1.3 es6
const newArr = [...arr1, ...arr2];
// console.log(newArr);//['anan','zooey',198,246,357]
2.内置函数用法
const num = [2, 5, 3, 6, 9, 0, 99]; //2.1 错误用法
let max1 = Math.max(num);
// console.log(max1);//NaN
//2.2 apply()
let max2 = Math.max.apply(null, num);
// console.log(max2);//99
//2.3 es6
let max3 = Math.max(...num);
// console.log(max3);//99
//2.4 call()
let max4 = Math.max.call(null, ...num);
// console.log(max4);//99
3.apply链接构造器用法
你可以使用 apply 来链接一个对象构造器,类似于 Java。(Java的对象构造器用来创建对象,也可以对对象属性做一些特殊处理,如时间格式化)
在接下来的例子中我们会创建一个全局 Global_Objects/Function 对象的 construct 方法,来使你能够在构造器中使用一个类数组对象而非参数列表。
个人理解:给全局的Function 类定义一个construct方法,并且在construct方法中根据现有对象创建一个新的对象,利用apply链接构造器,返回一个新的对象,此时对全局的Function 对象拥有了一个的 construct 方法,能够返回类数组对象
注意,这个construct方法是新定义的,不是原本的constructor
定义中描述的类数组对象是下图的样子:

//给全局的Function 类定义一个construct方法,并且在construct方法中创建一个新的对象,利用apply链接构造器,返回一个新的对象
Function.prototype.construct = function (aArgs) {
let oNew = Object.create(this.prototype);
this.apply(oNew, aArgs);
return oNew;
}; function MyConstructor() {
//这里就是对数组进行遍历,然后封装成k:v的形式
for (let nProp = 0; nProp < arguments.length; nProp++) {
this["property" + nProp] = arguments[nProp];
}
}
//定义一个数组
let myArray = ["zooey", "Hello world!", "anan"]; let myInstance = MyConstructor.construct(myArray);
//打印结果
console.log(myInstance);
深入理解 apply()方法的更多相关文章
- 关于JS中apply方法的基本理解
最近研究OpenLayers源码时,发现其中使用了比较多的apply方法,对其也是很不明白.于是上网经过多方面了解以及自己细细体会后,终于算是基本明白是其干什么的了,这里分享下.apply方法的造型是 ...
- 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]
转载自:http://gxxsite.com/content/view/id/132.html 在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore ...
- JS中的call()和apply()方法理解和使用
1.方法定义call方法: 语法:obj.method.call(thisObj[,arg1[, arg2[, [,.argN]]]]) 定义:调用对象(obj)的一个方法(method),以另一个对 ...
- 理解JavaScript中的call和apply方法
call方法 总的来说call()有这几种作用:1.可以借用另一个对象的方法.2.改变this的指向(重要).3.将arguments数组化.下面详细介绍这三种作用: 1.可以借用另一个对象的方法:当 ...
- JavaScript学习笔记(1))——————call,apply方法
学习前端也有一段时间了,但是效果甚微.利用时间不够充分,虽然是利用工作之余来学习.但是这不能成为我的借口. 今天学习了(其实看了很多遍)call apply方法. function abc(a,b){ ...
- angularjs $scope.$apply 方法详解
myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...
- Js apply方法详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- scala 学习笔记(04) OOP(上)主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类
一.主从构造器 java中构造函数没有主.从之分,只有构造器重载,但在scala中,每个类都有一个主构造器,在定义class时,如果啥也没写,默认有一个xxx()的主构造器 class Person ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- 深入学习JavaScript: apply 方法 详解(转)——非常好
主要我是要解决一下几个问题: 1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他巧妙用法(一般 ...
随机推荐
- [数据分析与可视化] Python绘制数据地图1-GeoPandas入门指北
本文主要介绍GeoPandas的基本使用方法,以绘制简单的地图.GeoPandas是一个Python开源项目,旨在提供丰富而简单的地理空间数据处理接口.GeoPandas扩展了Pandas的数据类型, ...
- 修改Win+E映射
!!!!!!此过程需要修改注册表,请谨慎操作 作用 修改后可以实现Win+E快捷打开任意程序 从原始资源管理器到其它应用 注册表路径: HKEY_CLASSES_ROOT\Folder\shell\o ...
- Windows下解决python pip命令下载慢的方法(超简单)
首先,常用的国内镜像: 1 https://pypi.tuna.tsinghua.edu.cn/simple/ 清华大学(推荐) 2 http://pypi.douban.com/simple/ 豆瓣 ...
- Kotlin 与 JAVA 不同之处
添加kotlin混编支持 要在Android项目中添加Kotlin混编支持,需要进行以下步骤: 在项目的 build.gradle 文件中添加以下代码: kotlin android { ... // ...
- 企业实践 | 国产操作系统之光? 银河麒麟KylinOS-V10(SP3)高级服务器操作系统基础安装篇
[点击 关注「 全栈工程师修炼指南」公众号 ] 设为「️ 星标」带你从基础入门 到 全栈实践 再到 放弃学习! 涉及 网络安全运维.应用开发.物联网IOT.学习路径 .个人感悟 等知识分享. 希望各位 ...
- Atcoder Regular Contest 093 C - Bichrome Spanning Tree
给定一张图,对图上边黑白染色,使得同时选择了两种颜色边的最小生成树边权和为X,求染色方案数. 先求出图的\(mst\)大小,然后分三类讨论: 1.\(X<mst\) 无解 2.\(X==mst\ ...
- IIS 部署.NET CORE 项目 出现 HTTP 错误 500.19 - Internal Server Error
当出现这个错误时是因为服务器上没有.NET CORE对应的SDK以及运行时文件,我的.NET CORE版本是2.2,下载的就是2.2对应的文件. 附上.NET CORE2.2版本的下载链接 下载 .N ...
- $el,$nextTick,$set
this.$el this.$el DOM的根元素 => 是一个完全唯一的 $el 直到组件挂载完成 (mounted) 之前都会是 undefined. 对于单一根元素的组件,$el 将会指向 ...
- LeetCode 双周赛 102,模拟 / BFS / Dijkstra / Floyd
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,欢迎来到小彭的 LeetCode 周赛解题报告. 昨晚是 LeetCode 双周赛第 102 场,你 ...
- 基础算法(排序 & 查找)
快速排序.归并排序.整数二分查找.浮点数二分查找 快速排序 主要思想是分治: 确定分界点 调整范围 递归处理左右两段 代码: #include <iostream> using names ...