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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
Node 模块原理与用法详解
May 13 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
PHP新手上路(五)
2006/10/09 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
js 幻灯片的实现
2011/12/06 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
express express-session的使用小结
2018/12/12 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python导入模块交叉引用的方法
2019/01/19 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
文明寄语大全
2014/04/11 职场文书
施工协议书范本
2014/04/22 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2015年公司工作总结
2015/04/25 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js