Js apply 方法 具体解释
Js apply方法具体解释
我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了,在这里我做例如以下笔记,希望和大家分享.. 如有什么不正确的或者说法不明白的地方希望读者多多提一些意见,以便共同提高..
主要我是要解决一下几个问题:
1. apply和call的差别在哪里
2. 什么情况下用apply,什么情况下用call
3. apply的其它巧妙使用方法(一般在什么情况下能够使用apply)
我首先从网上查到关于apply和call的定义,然后用演示样例来解释这两个方法的意思和怎样去用.
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.
Function.apply(obj,args)方法能接收两个參数
obj:这个对象将取代Function类里this对象
args:这个是数组,它将作为參数传给Function(args-->arguments)
call:和apply的意思一样,仅仅只是是參数列表不一样.
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:这个对象将取代Function类里this对象
params:这个是一个參数列表
1. apply演示样例:
<script type="text/javascript"> /*定义一个人类*/ function Person(name,age) { this.name=name; this.age=age; } /*定义一个学生类*/ functionStudent(name,age,grade) { Person.apply(this,arguments); this.grade=grade; } //创建一个学生类 var student=new Student("zhangsan",21,"一年级"); //測试 alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade); //大家能够看到測试结果name:zhangsan age:21 grade:一年级 //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的奇妙之处. </script>
分析: Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];
也就是通俗一点讲就是:用student去运行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
2. call演示样例
在Studen函数里面能够将apply中改动成例如以下:
Person.call(this,name,age);
这样就ok了
3. 什么情况下用apply,什么情况下用call
在给对象參数的情况下,假设參数的形式是数组的时候,比方apply演示样例里面传递了參数arguments,这个參数是数组类型,而且在调用Person的时候參数的列表是相应一致的(也就是Person和Student的參数列表前两位是一致的) 就能够採用 apply , 假设我的Person的參数列表是这种(age,name),而Student的參数列表是(name,age,grade),这样就能够用call来实现了,也就是直接指定參数列表相应值的位置(Person.call(this,age,name,grade));
4. apply的一些其它巧妙使用方法
细心的人可能已经察觉到,在我调用apply方法的时候,第一个參数是对象(this), 第二个參数是一个数组集合, 在调用Person的时候,他须要的不是一个数组,可是为什么他给我一个数组我仍然能够将数组解析为一个一个的參数,这个就是apply的一个巧妙的用处,能够将一个数组默认的转换为一个參数列表([param1,param2,param3] 转换为 param1,param2,param3) 这个假设让我们用程序来实现将数组的每个项,来装换为參数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了下面高效率的方法:
a) Math.max 能够实现得到数组中最大的一项
由于Math.max 參数里面不支持Math.max([param1,param2]) 也就是数组
可是它支持Math.max(param1,param2,param3…),所以能够依据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的能够得到一个数组中最大的一项(apply会将一个数组装换为一个參数接一个參数的传递给方法)
这块在调用的时候第一个參数给了一个null,这个是由于没有对象去调用这种方法,我仅仅须要用这种方法帮我运算,得到返回的结果即可,.所以直接传递了一个null过去
b) Math.min 能够实现得到数组中最小的一项
相同和 max是一个思想 var min=Math.min.apply(null,array);
c) Array.prototype.push 能够实现两个数组合并
相同push方法没有提供push一个数组,可是它提供了push(param1,param,…paramN) 所以相同也能够通过apply来装换一下这个数组,即:
vararr1=new Array("1","2","3"); vararr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2);
也能够这样理解,arr1调用了push方法,參数是通过apply将数组装换为參数列表的集合.
通常在什么情况下,能够使用apply类似Math.min等之类的特殊使用方法:
一般在目标函数仅仅须要n个參数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),能够通过apply的方式巧妙地解决问题!
5. 总结:
一開始我对apply 很的不懂,最后多看了几遍,自己多敲了几遍代码,才明确了中间的道理,所以,无论做什么事情,仅仅要自己肯动脑子,肯动手写程序,这样一个技术就会掌握…
还有比方第四部分得内容,巧妙的攻克了实实在在存在的问题,这个肯定不是一个刚開始学习的人能想到的解决方式(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!
当中有大部分内容參考自:
http://www.cnblogs.com/xiaohongwu/archive/2011/06/15/2081237.html
中间是我对其的一些具体理解…
我也是一个js新生,假设博文哪里写的不是有问题或这不完好的地方,希望前辈们多多不吝赐教,谢谢
相关文章
- src引入js时添加时间戳参数方法
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(JQuery.js)点赞按钮动画
- JS框架_(JQuery.js)上传进度条
- websocket-heartbeat-js心跳检测库正式发布
- js中判断对象是否为空的三种实现方法
- Knockout.Js官网学习(Mapping高级用法二)
- 实现网页页面跳转的几种方法(meta标签、js实现、php实现)
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- 用 webpack 构建 node 后端代码,使其支持 js 新特性并实现热重载
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- [WASM Rust] Use the js-sys Crate to Invoke Global APIs Available in Any JavaScript Environment
- [Hapi.js] Extending the request with lifecycle events
- js es6数组常用方法:forEach map filter find every
- 使用生成器展平异步回调结构,JS篇
- js面向对象 多种创建对象方法小结
- js工具方法
- Atitit.常见的异常分类 目录 1. 双元分类法1 1.1. 按照语言分 java js c# php等1 1.2. 通用常见异常vs 特定异常1 1.3. Runtime ex vs c
- Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针
- atitit. js 跨界面 页面 web cs 传值方法总结
- three.js(JS 三维模型库)介绍和入门
- js实现浏览器窗口大小被改变时触发事件的方法
- JS实现获取鼠标在画布中的位置
- js反混淆工具
- JS直接调用C#后台方法(ajax调用)
- js对象拷贝方法
- js动态设置padding-top遇到的坑
- JS中setTimeout()的使用方法具体解释
- JS中match方法探究
- js split str.split(" "); split使用方法 在某处截字符串
- JS中判断null、undefined与NaN的方法
- JS call()和apply()方法和区别
- JS中Math.random()方法的使用总结
- JS &&(与运算)详解
- js的sort方法的使用
- satellite.js库下载、介绍、安装、引用,返回函数的方法