Javascript中call和apply函数的比较和使用实例


Posted in Javascript onFebruary 03, 2015

一些简单的Javascript操作中较少会用到call和apply函数,在另外一些较大型的操作中,如web应用开发,js框架开发中可能会经常遇到这两个函数。关于这两个函数的解释,网上的资料也很多,但是本人认为很多资料要么照本宣科,要么高度雷同,缺少接地气的解释。接下来我试图用更加清晰简单的思路来分析解释这两个函数。

我们可以将call()和apply()看做是某个对象的方法,通过调用方法的实行来间接调用函数。call()和apply()的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。要想对对象o的方法来调用函数f(), 可以这样使用call()和apply(): f.call(o) f.apply(o).[1]

先来分析一下call,这里有ECMAScript 3rd Edition对call函数的解释[2]:当call方法被一个function对象调用时(func.call(0)),需要传入一个必须的参数和若干个非必须的参数,它的执行过程是这样的:
a, 如果调用call的对象是不可运行的,抛出一个TypeError错误。
b, 设置参数列表为空
c, 如果被调用的方法传入不止一个参数,那么依次把arg1,arg2…插入到参数列表里
d, 返回调用call的函数结果,把调用函数(func)中的this用传入的参数1替换,把传入的参数列表当作这个函数的参数。
实际上,call函数是function对象的原型,也就是说,当调用call的函数必须也是个函数,当调用这个call时,把调用call的函数中的this用传入的对象替换就行了。下面有个例子:

<script>
 function C1(){
 this.name='张三';
 this.age='24';
 this.sayname=function(){
  console.log("这里是C1类,我的名字是:"+this.name+"我的年龄是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

执行结果:
这里是C1类,我的名字是:张三我的年龄是24
这里是C1类,我的名字是:李四我的年龄是25
上面的代码中,声明了两个类,C1和C2,C1有两个属性,一个方法,C2也有两个和C1一样的属性,实例化之后,c1.sayname()打印出了实际属性,c1.sayname.call(c2)却打印除了c2的属性,为什么为这样?因为sayname()是个函数,并且函数体内有this,当call执行的之后,this就会被c2代替,所以,最终会打印出c2的属性。
apply和call的区别就在于可选参数的传递,apply的可选参数全部存放在一个数组当中,当成一个参数窜入而call是分成多个参数传入。
那么,apply和call函数有哪些应用呢?第一个是网络上比较经典的求数字数组中的最大元素,直接用Math.max.apply(null,array)即可,另外一个是可以用apply和call实现继承,如下:

<script> 
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜欢玩耍');
 }
 this.intruduce=function(){
  console.log('大家好,我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

执行结果:
我在走路
我很喜欢玩耍
大家好,我是小明
与call()和apply()相似的函数是bind(), 它是在ECMAScript 5中新增的方法,但在ECMAScript 3中可以轻易的模拟bind()。bind函数一样也是Javascript中Function.prototype的方法,这个方法的主要内容是将函数绑定至某个对象。当函数f()上绑定bind()方法并传入一个对象o作为参数,这个方法将返回一个新的函数当作o的方法来调用。传入新函数的任何实参都将传入原始函数。如下:

<script>
 function introduce(country,hobby){
 return "大家好,我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中国","打球"));
</script>

执行结果:
大家好,我叫小明, 今年20岁, 来自中国, 喜欢打球
上面的例子等效于:

<script>
 function introduce(country,hobby){
 return "大家好,我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中国","打球"]));
    //或者下面这个
 console.log(introduce.call(xiaoming,"中国","打球"));
</script>

需要注意的是:在ECMAScript 5的严格模式中,call()和apply()的第一个实参都会变成this的值,哪怕传入的实参是原始值甚至是null或者undefined。在ECMAScript 3和非严格模式中,传入的null和undefined都会被全局对戏那个代替,而其他原始值会被相应的包装对象所替代。

参考资料

[1], Javascript权威指南第6版,189页
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)

Javascript 相关文章推荐
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 #Javascript
jQuery内部原理和实现方式浅析
Feb 03 #Javascript
jQuery中extend函数的实现原理详解
Feb 03 #Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 #Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 #Javascript
JavaScript闭包详解
Feb 02 #Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 #Javascript
You might like
用libtemplate实现静态网页生成
2006/10/09 PHP
php 中文和编码判断代码
2010/05/16 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
详解Python中的文本处理
2015/04/11 Python
python利用datetime模块计算时间差
2015/08/04 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python离线安装外部依赖包的实现
2020/02/13 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
yy结婚证婚词
2014/01/10 职场文书
师德学习感言
2014/01/31 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
心理学专业求职信
2014/06/16 职场文书
篮球赛新闻稿
2015/07/17 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python