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 仿关机效果的图片层
Dec 26 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 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去除二维数组的重复项方法
2015/11/03 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
JavaScript 乱码问题
2009/08/06 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
js+canvas实现画板功能
2020/09/13 Javascript
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
怎么样写好简历中的自我评价
2013/10/25 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
个人校本研修方案
2014/05/26 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js