理清apply(),call()的区别和关系


Posted in Javascript onAugust 14, 2011

如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的"偏见",因为这对您来说绝对是一片新大陆,让JavaScrip慢慢融化以前一套凝固的编程意识,注入新的生机!
好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.
区分apply,call就一句话,

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同
那什么是方法产生的作用,方法传递的参数是什么呢?
我们就上面的foo.call(this, arg1, arg2, arg3)展开分析.
foo是一个方法,this是方法执行时上下文相关对象,arg1, arg2, arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象, 如果有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.
在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.
为了更好的领会这this是什么,举个例子.
/创建一个A类 
function A(){ 
//类实例化时将运行以下代码 
//此时的执行上下文对象就是this,就是当前实例对象 
this.message = "message of a"; 
this.getMessage = function(){ 
return this.message; 
} 
} 
//创建一个A类实例对象 
var a = new A(); 
//调用类实例getMessage方法获得message值 
alert(a.getMessage()); 
//创建一个B类 
function B(){ 
this.message = "message of b"; 
this.setMessage = function(msg){ 
this.message = msg; 
} 
} 
//创建一个B类实例对象 
var a = new B();

题外话:javascript对象所有属性都是公开的(public),没私有(private)之说,所以也可直接访问message属性
alert(a.message);
可见,A, B类都有一个message属性(面向对象中所说的成员),A有获取消息的getMessage方法,B有设置消息的setMessage方法,下面来显示call的威力.
//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的! 
b.setMessage.call(a, "a的消息"); 
//下面将显示"a的消息" 
alert(a.getMessage()); 
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!

这就是动态语言 JavaScript call的威力所在!
简直是"无中生有",对象的方法可以任意指派,而对象本身一直都是没有这方法的,注意是指派,通俗点就是,方法是借给另一个对象的调用去完成任务,原理上是方法执行时上下文对象改变了.
所以 b.setMessage.call(a, "a的消息"); 就等于用a作执行时上下文对象调用b对象的setMessage方法,而这过程中与b一点关系都没有, 作用等效于a.setMessage( "a的消息");
因为apply与call产生的作用是一样的,可以说
call, apply作用就是借用别人的方法来调用,就像调用自己的一样.
好,理解了call, apply相同处—?作用后,再来看看它们的区别,看过上面例子,相信您大概知道了.
从 b.setMessage.call(a, "a的消息") 等效于 a.setMessage( "a的消息") 可以看出, "a的消息"在call中作为一个参数传递,
那么在apply中是怎么表示的呢,直接解释说不清楚,apply要结合应用场景才一目了然.我们来设计一个应用场景:
function print(a, b, c, d){ 
alert(a + b + c + d); 
} 
function example(a, b , c , d){ 
//用call方式借用print,参数显式打散传递 
print.call(this, a, b, c, d); 
//用apply方式借用print, 参数作为一个数组传递, 
//这里直接用JavaScript方法内本身有的arguments数组 
print.apply(this, arguments); 
//或者封装成数组 
print.apply(this, [a, b, c, d]); 
} 
//下面将显示"背光脚本" 
example("背" , "光" , "脚", "本");

在这场景中, example方法内,a, b, c, d作为方法传递的参数, 方法分别运用了apply, call去借print方法来调用,
最后一句由于直接调用example方法, 所以在该方法中的上下文对象this就是window对象.
所以,call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递.所以可以说成
call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.

应用场景:
当参数明确时可用call, 当参数不明确时可用apply给合arguments

//例 
print.call(window, "背" , "光" , "脚", "本"); 
//foo参数可能为多个 
function foo(){ 
print.apply(window, arguments); 
}
Javascript 相关文章推荐
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
Apr 20 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 #Javascript
javascript中关于执行环境的杂谈
Aug 14 #Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 #Javascript
js 通用javascript函数库整理
Aug 14 #Javascript
javascript中的数字与字符串相加实例分析
Aug 14 #Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 #Javascript
javascript高级学习笔记整理
Aug 14 #Javascript
You might like
php的ddos攻击解决方法
2015/01/08 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
Yii框架安装简明教程
2020/05/15 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
domReady的实现案例
2016/11/23 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python爬虫实现百度图片自动下载
2018/02/04 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
服务员自我评价
2014/01/25 职场文书
校园安全演讲稿
2014/05/09 职场文书
二人合伙经营协议书
2014/09/13 职场文书
狮子林导游词
2015/02/03 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang