深入理解关于javascript中apply()和call()方法的区别


Posted in Javascript onApril 12, 2016

如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学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(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>return this.message;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个A类实例对象
var a = new A();
//调用类实例getMessage方法获得message值
alert(a.getMessage());
//创建一个B类
function B(){
this.message = ”message of b”;
this.setMessage = function(msg){
<SPAN style="WHITE-SPACE: pre">	</SPAN>this.message = msg;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个B类实例对象
var a = new B();

可见,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(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>print.apply(window, arguments);
}

以上这篇深入理解关于javascript中apply()和call()方法的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 #Javascript
Bootstrap每天必学之折叠
Apr 12 #Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 #Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 #Javascript
如何高效率去掉js数组中的重复项
Apr 12 #Javascript
学习使用bootstrap3栅格系统
Apr 12 #Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 #Javascript
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js form action动态修改方法
2008/11/04 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python根据文本生成词云图代码实例
2019/11/15 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
租车协议书范本2014
2014/11/17 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
企业法律事务工作总结
2015/08/11 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python