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 Event事件学习第一章 Event介绍
Feb 07 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
javascript中的delete使用详解
Apr 11 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JS控制表单提交的方法
Jul 09 Javascript
vue模板语法-插值详解
Mar 06 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
Node.js实现文件上传
2016/07/05 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python学习思维导图(必看篇)
2017/06/26 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python绘图实现显示中文
2019/12/04 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
Python Selenium库的基本使用教程
2021/01/04 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
如何用Lucene索引数据库
2016/02/23 面试题
计算机专业毕业生求职信分享
2013/12/24 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
个人先进事迹材料
2014/12/29 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫