Js apply方法详解


Posted in Javascript onFebruary 16, 2017

我在一开始看到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("qian",21,"一年级");  
//测试  
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  
//大家可以看到测试结果name:qian age:21 grade:一年级  
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.  
</script>

分析: Person.apply(this,arguments); 

this:在创建对象在这个时候代表的是student 

arguments:是一个数组,也就是[“qian”,”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 非常的不懂,最后多看了几遍,自己多敲了几遍代码,才明白了中间的道理,所以,不管做什么事情,只要自己肯动脑子,肯动手敲代码,这样一个技术就会掌握…    

还有比如第四部分得内容,巧妙的解决了实实在在存在的问题,这个肯定不是一个初学者能想到的解决方案(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木! 

Javascript 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 #Javascript
js实现文字无缝向上滚动
Feb 16 #Javascript
node学习记录之搭建web服务器教程
Feb 16 #Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 #Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 #Javascript
js模态对话框使用方法详解
Feb 16 #Javascript
javascript获取以及设置光标位置
Feb 16 #Javascript
You might like
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
javascript动态加载二
2012/08/22 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
TypeScript入门-接口
2017/03/30 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python简单读取json文件功能示例
2017/11/30 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
运动会四百米广播稿
2014/01/19 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS