`

深入学习JavaScript: 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示例:

 1  <script type="text/javascript">
 2     /*定义一个人类*/
 3     function Person(name,age)
 4     {
 5         this.name=name;
 6         this.age=age;
 7     }
 8     /*定义一个学生类*/
 9     function Student(name,age,grade)
10     {
11         Person.apply(this,arguments);
12         this.grade=grade;
13     }
14     //创建一个学生类
15     var student=new Student("qian",21,"一年级");
16     //测试
17     alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
18     //大家可以看到测试结果name:qian  age:21  grade:一年级
19     //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
20 </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来装换一下这个数组,即:

1      vararr1=new Array("1","2","3");
2
3      vararr2=new Array("4","5","6");
4
5      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

转自:http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html
参考:http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html
分享到:
评论

相关推荐

    JavaScript动态网页开发详解——源文件

    在"JavaScript动态网页开发详解——源文件"中,我们可以深入学习到JavaScript在网页开发中的应用技巧。此资料可能包含了JQUERY的官方实例全集,jQuery是一个高效、简洁且富有创造性的JavaScript库,它极大地简化了...

    深入理解JavaScript系列

    深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手 深入理解JavaScript系列(24):JavaScript与DOM(下) 深入理解JavaScript系列(25):设计模式之单例模式 深入理解JavaScript系列(26)...

    [JavaScript权威指南(第6版)].(JavaScript:The.Definitive.Guide).David.Flanagan.文字版.pdf

    通过以上知识点的梳理,我们可以看到《JavaScript权威指南》第6版涵盖了从基础语法到高级特性的全面内容,对于希望深入了解JavaScript及其在Web开发中应用的学习者来说,是一本不可或缺的参考书籍。无论是初学者还是...

    a smarter way to learn javascript 2013

    ### 一种更智能的学习JavaScript的方法(2013年版) #### 一、概述 《一种更智能的学习JavaScript的方法》是一本由马克·迈尔斯(Mark Myers)在2013年出版的书籍,该书旨在通过现代技术手段来帮助读者更加高效地...

    JavaScript中call与apply方法

    JavaScript中call与apply方法

    JavaScript凌厉开发——Ext详解与实践_源码清单

    JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单

    addressList:软工大作业——群通讯录

    searchEverything————lkc创建通讯录界面: createAddressList————lkx通讯录列表页面(群):addressList2————lkx通讯录成员界面:peoplePage————zn通讯录消息界面:messagePage————zn消息发布...

    学习资源——JavaScript

    在标题“学习资源——JavaScript”与描述“点点滴滴,记录JavaScript的开头引用的应用”中,我们可以理解到这份文档旨在分享JavaScript的一些基本应用实例,特别是关于如何引入(import)或链接(link)外部资源。...

    JavaScript凌厉开发:Ext详解与实践(下).pdf

    JavaScript凌厉开发:Ext详解与实践(下).pdf

    JavaScript网页开发——体验式学习教程.pdf

    这份"JavaScript网页开发——体验式学习教程.pdf"提供了一个深入理解JavaScript语法和实践的平台,帮助初学者和有一定基础的开发者提升技能。 教程首先会介绍JavaScript的基础知识,包括变量、数据类型(如字符串、...

    JSON — JSON入门与实战详解 —— JavaScript、Java与JSON互转

    NULL 博文链接:https://jiangzhengjun.iteye.com/blog/463038

    web学习笔记 —— javascript基础

    这个学习笔记可能深入探讨了以上知识点,并通过实例帮助读者更好地理解和运用JavaScript。通过阅读301_JavaScript_01.pdf,你可以进一步了解JavaScript的基础概念,逐步掌握这个强大的脚本语言。无论你是初学者还是...

    JavaScript基础与案例开发详解

    资源名称:Javascript基础与案例开发详解内容简介:《Java script基础与案例开发详解》根据Javascript在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况,有针对性地安排了丰富的案例,从基本的...

    完全手册:JavaScript动态网页开发详解\

    完全手册:JavaScript动态网页开发详解(2)

    apply应用小结

    标题中的“apply应用小结”指的是JavaScript中函数对象的一个关键特性——`apply()`方法的使用总结。`apply()`是JavaScript中函数对象的一个方法,它允许我们调用一个函数,并可以自定义函数执行时的上下文(`this`...

    JavaScript例子——计算

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,主要负责客户端的交互...对于学习和提升JavaScript编程技能,这些都是非常重要的知识点。如果希望深入了解,建议直接访问提供的博客链接,查看具体的代码示例。

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    Web编程基础——CSS、JavaScript、jQuery

    资源名称:Web编程基础——CSS、JavaScript、jQuery 资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

Global site tag (gtag.js) - Google Analytics