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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jquery 使用点滴函数代码
May 20 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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语法(2)
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php实现字符串翻转的方法
2015/03/27 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python框架flask表单实现详解
2019/11/04 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
项目专员岗位职责
2013/12/04 职场文书
小学开学典礼主持词
2014/03/19 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
工作总结与自我评价
2014/09/18 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
岁月神偷观后感
2015/06/11 职场文书