Js中apply和call方法详解
首页 » js/html/css » Js中apply和call方法详解

Js中apply和call方法详解

作者：myadmin |  时间：2014-05-14 |  浏览：3232 |  1 条评论
  1. Js中apply和call方法详解
  3. 对于刚接触js的鞋童 对apply()和 call()  想必很是陌生，这里给大家详细解释一下两者的区别和用法.
  4. 下面我将围绕一下三个问题为大家展开讲解:
  6. 1.apply和call的区别在哪里
  8. 2.什么情况下用apply,什么情况下用call
  10. 3.apply的其他巧妙用法（一般在什么情况下可以使用apply）
  12. 首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用.
  14.          apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.
  15.  Function.apply(obj,args)方法能接收两个参数
  16. obj：这个对象将代替Function类里this对象
  17. args：这个是数组，它将作为参数传给Function（args–>arguments）
  19.          call:和apply的意思一样,只不过是参数列表不一样.
  20.  Function.call(obj,[param1[,param2[,…[,paramN]]]])
  21. obj：这个对象将代替Function类里this对象
  22. params：这个是一个参数列表
  24. 1.apply用法说明:
  26. <script type=”text/javascript”>
  27. /*定义一个人类*/
  28. function Person(name,age) {
  29.     this.name=name; this.age=age;
  30. }
  31.  /*定义一个学生类*/
  32. functionStudent(name,age,grade) {
  33.     Person.apply(this,arguments); this.grade=grade;
  34. }
  35. //创建一个学生类
  36. var student=new Student(“qian”,21,”一年级”);
  37. //测试
  38. alert(“name:”+student.name+”\n”+”age:”+student.age+”\n”+”grade:”+student.grade);
  39. //大家可以看到测试结果name:qian age:21 grade:一年级
  40. //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
  41. </script>
  43. 分析: Person.apply(this,arguments);
  45. this:在创建对象在这个时候代表的是student
  47. arguments:是一个数组,也就是[“qian”,”21”,”一年级”];
  49. 也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
  53. 2.call用法说明：
  55. 在Studen函数里面可以将apply中修改成如下:
  57. Person.call(this,name,age);
  59. 这样就ok了
  61. 3.apply和call 分别在什么情况下使用
  63. 在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply ；
  64. 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));
  65. 是不非常容易区分，哈哈~
  67. 4.apply的一些其他巧妙用法
  69. 细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合,
  71. 在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,
  73. 这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3)
  74. 这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:
  76. a)Math.max 可以实现得到数组中最大的一项
  78. 因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组
  80. 但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项
  82. (apply会将一个数组装换为一个参数接一个参数的传递给方法)
  84.          这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去
  86. b)Math.min  可以实现得到数组中最小的一项
  88. 同样和 max是一个思想 var min=Math.min.apply(null,array);
  90. c)Array.prototype.push 可以实现两个数组合并
  92. 同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:
  94. vararr1=new Array(“1″,”2″,”3″);
  95.  vararr2=new Array(“4″,”5″,”6″);
  96. Array.prototype.push.apply(arr1,arr2);
  98. 也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.
  100. 通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:
  102. 一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!
  105. 5.小结一下:
  107. 刚接触js的鞋童，相比看了以上的讲解后会有所理解，如果不理解的，可以给我留言，必定一一帮解决。刚接触新东西，什么都不会，肯定有压力，慢慢学习，以后熟悉了、入门了，就轻松了！与大家共勉！
  109. Js中apply和call方法详解   http://www.uuboku.com/100.html
标签：
本站遵循CC协议署名-非商业性使用-相同方式共享
转载请注明来自：优优博库

相关推荐
更多

LNMP(linux+nginx+mysql+php)服务器环境配置
Posted on 12月14日
Query树插件zTree用法案例详解
Posted on 06月16日
开源系统应用RAID保护企业数据安全
Posted on 04月15日
世界，你好！
Posted on 12月13日
  1. 广东九地行 2014-5-15 11:24 #1

    代码好复杂。。

发表评论