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 相关文章推荐
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
echarts实现折线图的拖拽效果
Dec 19 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
星际流派综述
2020/03/04 星际争霸
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
对python的输出和输出格式详解
2018/12/08 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
地震捐款倡议书
2014/08/29 职场文书
学校教学管理制度
2015/08/06 职场文书
基于Redission的分布式锁实战
2022/08/14 Redis