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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
js树形控件脚本代码
Jul 24 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue权限问题的完美解决方案
May 08 Javascript
vue.js实现简单购物车功能
May 30 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 日志缩略名的创建函数代码
2010/05/26 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
JavaScript中的事件处理
2008/01/16 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python 多核并行计算的示例代码
2017/11/07 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python命令行click参数用法解析
2019/12/19 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
幼儿园实习生辞职信
2014/01/20 职场文书
企业文化标语口号
2014/06/09 职场文书
预备党员考察意见范文
2015/06/01 职场文书
三十年同学聚会感言
2015/07/30 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android