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网页元素拖拽插件
Dec 01 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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中error与exception的区别及应用
2014/07/28 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
使用URL传输SESSION信息
2015/07/14 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
python基础教程之缩进介绍
2014/08/29 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python3.5运算符操作实例详解
2019/04/25 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python 解析简单的XML数据
2020/07/24 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
附答案的Java面试题
2012/11/19 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
暑假实习求职信范文
2013/09/22 职场文书
企业治理工作自我评价
2013/09/26 职场文书
教育教学读书笔记
2015/07/02 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
python多次执行绘制条形图
2022/04/20 Python