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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
js实现的map方法示例代码
Jan 13 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
js获取json元素数量的方法
Jan 27 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php简单统计中文个数的方法
2016/09/30 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
jQuery中first()方法用法实例
2015/01/06 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
施工人员岗位职责
2013/12/12 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
法人委托书范本
2014/09/15 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang