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 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
小程序api实现promise封装过程解析
Nov 21 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/04/30 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
js获取div高度的代码
2008/08/09 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
简单谈谈python中的多进程
2016/11/06 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Django设置Postgresql的操作
2020/05/14 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
周年庆典邀请函范文
2014/01/23 职场文书
家长会主持词开场白
2014/03/18 职场文书
教师党员公开承诺书
2014/03/25 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
地陪导游欢迎词
2015/01/26 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
使用Python拟合函数曲线
2022/04/14 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server