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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
用cssText批量修改样式
Aug 29 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue如何使用rem适配
Feb 06 Vue.js
文本框回车提交与禁止提交示例
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实现将数组转换为XML的方法
2015/03/09 PHP
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
几道PHP面试题
2013/04/14 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
洗煤厂厂长岗位职责
2014/01/03 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
新闻传播专业求职信
2014/07/22 职场文书
中学生思想品德评语
2014/12/31 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS