javascript中call和apply方法浅谈


Posted in Javascript onSeptember 27, 2013

call和apply的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。
例如,如果要想以对象o的方法来调用函数f,可以按如下的方式使用call和apply方法:

f.call(o);

f.apply(o);

可以按如下的代码来理解:
o.m = f;
//将f存储为o的临时方法

o.m();
//调用这个临时方法

delete o.m;
//将这个临时方法删除

来个示例吧。
function testFun(){


return this.a + this.b;

}
 
var o = {a:1, b:2};

testFun.call(o);
//3

testFun.apply(o);
//3

上述代码执行的结果均为3,可以理解为return o.a + o.b。
 考虑一个问题,如果call和apply方法的第一个实参为null或者undefined为怎样?来看下面的一个例子:

var a = 10, b = 20;

function testFun(){


return this.a + this.b;

}

testFun.call();

testFun.apply();

上述代码执行的结果均为30。这是因为call和apply的第一个实参如果传入的是null或者undefined,则会被全局对象代替。
 那call和apply这两个方法有什么区别呢?
对于call方法来说,第一个调用上下文实参之后的所有实参就是要传入待调用函数的值。比如,以对象o的方法的形式调用函数f,并传入两个参数,就可以使用如下的代码:

f.call(o, 1, 2);

而apply方法则将第一个实参之后的所有实参放入一个数组内,
f.apply(o, [1, 2]);

来个例子吧
function testFun(x, y){


return this.a + this.b + x + y;

}

var o = {a:1, b:2};

testFun.call(o, 10, 20);

testFun.apply(o, [10, 20]);

 上述代码的执行结果为33,可以理解为 return o.a + o.b + 10 + 20
Javascript 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
JS前端笔试题分析
Dec 19 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
文本框回车提交与禁止提交示例
Sep 27 #Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 #Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 #Javascript
js克隆对象、数组的常用方法介绍
Sep 26 #Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 #Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 #Javascript
Extjs实现进度条的两种便捷方式
Sep 26 #Javascript
You might like
PHP 实例化类的一点摘记
2008/03/23 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php object转数组示例
2014/01/15 PHP
PHP实现的json类实例
2015/07/28 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP 图片处理
2020/09/16 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
两年的个人工作自我评价
2014/01/10 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
法律专业自荐信
2014/06/03 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
教导主任个人总结
2015/03/03 职场文书
学校国庆节活动总结
2015/03/23 职场文书