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 相关文章推荐
Jquery为a标签的href赋值实现代码
May 03 Javascript
js格式化时间小结
Nov 03 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
js中常用的Math方法总结
Jan 12 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
文本框回车提交与禁止提交示例
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使用memcache存储session的详解
2013/06/25 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
javascript静态的url如何传递
2007/05/03 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python使用mysql数据库示例代码
2017/05/21 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python中GIL的使用详解
2018/10/03 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
计算机求职信
2013/12/01 职场文书
项目合作协议书
2014/04/16 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
小学生通知书评语
2014/12/31 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
运动会1000米加油稿
2015/07/21 职场文书
建议书的格式及范文
2015/09/14 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS