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使用手册之三 CSS操作
Mar 24 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
react路由配置方式详解
Aug 07 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
JS实现简易留言板特效
Dec 23 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
理解Python中的With语句
2015/02/02 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python 文件查找及内容匹配方法
2018/10/25 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
实例代码讲解Python 线程池
2020/08/24 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
公司员工离职证明书
2014/10/04 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年纪委工作总结
2014/12/05 职场文书
考研英语辞职信
2015/05/13 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis