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和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
JavaScript文档对象模型DOM
Nov 20 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
phpinfo的知识点总结
2019/10/10 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
ES6中字符串的使用方法扩展
2019/06/04 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
大客户销售经理职责
2013/12/04 职场文书
党校学习思想汇报
2014/01/06 职场文书
黄金酒广告词
2014/03/21 职场文书
地球一小时宣传标语
2014/06/24 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
心术观后感
2015/06/11 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android