注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php开发lamp

《西安--木木》-经历丰富了生活。 架构师QQ群: 246695517

 
 
 

日志

 
 

javaScript高级编程之call()和apply()方法详解(转)  

2014-05-23 14:31:30|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

   想必很多朋友在读一些js插件源码的时候都会遇到call()和apply()这两个函数 , 有些朋友还是对这两个方法存在这样或者那样的疑问, 下面我会通过几个小例子来简单的阐述一下两者的功能和区别。

call()apply()的作用都是把某个函数(我更喜欢称其为方法)给另一个对象使用。两者之间的区别在于call()函数中接受的参数是不定的, 是可以无限多的,而apply()只接受两个参数。

   我们来看一个例子


//创建一个动物类,有两个属性name&cryStr
var animal = function(name,cryStr){
this.name = name;
this.cryStr = cryStr;
}
//同时具备一个方法cry
animal.prototype.cry = function(tone){
console.log(this.name+tone+':"'+this.cryStr+'"');
}
//声明一个对象 dog,
var dog = new animal('旺财','汪汪汪');
//调用cry方法可以看到  旺财大叫:"汪汪汪"
dog.cry('狂叫');
//重点!我们重新定义一个植物类,可以看到的是植物类没有cry方法
var plant = function(name,cryStr){
this.name = name;
this.cryStr = cryStr;
}
//声明一根葱
var shallot = new plant('大葱','呱呱呱');
animal.prototype.cry.call(shallot,'悄悄地发出');


   上面的例子可以看出 plant 类实质上没有cry方法,但通过animal.prototype.cry.call(shallot,'悄悄地发出');方法就可以将animal类的cry方法让shallot来使用,使用过程中cry方法调用的是shallot的属性,这一点我们可以认为是plant类继承了animal类


   apply()和call()作用是一样的, 调用时我们可以将代码中的21行修改为这样:

1
animal.prototype.cry.apply(shallot,['悄悄地发出']);

   我们会发现,效果还是一样的,只是apply的第二个参数是一个数组,而call不是,但call可以有很多个参但apply只能有两个,我们来看个例子:



//无限参数加法
var add = function(){
var total = 0,disStr = '';
var myArgs = Array.prototype.slice.call(arguments,0);
for(i in myArgs){
total += parseInt(myArgs[i]);
}
console.log(myArgs.join('+')+' = '+total);
}
//用call调用add方法
add.call(null,1,2,3,4,5,6,7,8,9);


   上面看样子中firebug会输出 1+2+3+4+5+6+7+8+9 = 45, 代码中11行是call()的用法,除了第一个参数null(空对象),后面的全部是传给add方法的参数,有人说add方法貌似没有定义参数个数呀? 这个就是arguments对象的魅力了, 当然本文先不讲这个, 如有兴趣请查看 arguments对象详解

   如果使用apply()应该如何写呢?

   add.apply(null,[1,2,3,4,5,6,7,8,9]);即可达到 add.call(null,1,2,3,4,5,6,7,8,9)的效果,很明显,apply第二个参数是一个数组,怎么样?是不是apply更加灵活呢?


   总结

   call()和apply()都是将某对象的某方法给另一个对象使用,达到集成的效果,两者的第一个参数都是继承者(对象,可以是空null、{}),区别在于apply的第二个参数是一个数组,而call不是,但call可以有很多个参但apply只能有两个。


  评论这张
 
阅读(232)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017