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和jquery判断浏览器版本等信息
Jul 04 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
phpwind中的数据库操作类
2007/01/02 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js倒计时抢购实例
2015/12/20 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
详解Python中如何写控制台进度条的整理
2018/03/07 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python中如何使用虚拟环境
2020/10/14 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
为什么需要版本控制
2016/10/28 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
小学班主任培训方案
2014/06/04 职场文书
四风查摆剖析材料
2014/10/10 职场文书
爱情保证书
2015/01/17 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android