Javascript 中的 call 和 apply使用介绍


Posted in Javascript onFebruary 22, 2012

简单的说就是改变函数执行的上下文,这是最基本的用法。两个方法基本区别在于传参不同。
call(obj,arg1,arg2,arg3);call第一个参数传对象,可以是null。参数以逗号分开进行传值,参数可以是任何类型。
apply(obj,[arg1,arg2,arg3]);apply第一个参数传对象,参数可以是数组或者arguments 对象。
这两个方法通常被用来类的继承和回调函数:
作用一、类的继承:
先来看这个例子:

function Person(name,age){ 
this.name = name; 
this.age=age; 
this.alertName = function(){ 
alert(this.name); 
} 
this.alertAge = function(){ 
alert(this.age); 
} 
} 
function webDever(name,age,sex){ 
Person.call(this,name,age); 
this.sex=sex; 
this.alertSex = function(){ 
alert(this.sex); 
} 
} 
var test= new webDever("愚人码头",28,"男"); 
test.alertName();//愚人码头 
test.alertAge();//28 
test.alertSex();//男

这样 webDever类就继承Person类,Person.call(this,name,age) 的 意思就是使用 Person构造函数(也是函数)在this对象下执行,那么 webDever就有了Person的所有属性和方法,test对象就能够直接调用Person的方法以及属性了; 09年的理解解非常粗浅,呵呵。
作用二、回调函数:
call 和 apply在回调行数中也非常有用,很多时候我们在开发过程中需要对改变回调函数的执行上下文,最常用的比如ajax或者定时什么的,一般情况下,Ajax都是全局的,也就是window对象下的,来看这个例子:
function Album(id, title, owner_id) { 
this.id = id; 
this.name = title; 
this.owner_id = owner_id; 
}; 
Album.prototype.get_owner = function (callback) { 
var self = this; 
$.get('/owners/' + this.owner_id, function (data) { 
callback && callback.call(self, data.name); 
}); 
}; 
var album = new Album(1, '生活', 2); 
album.get_owner(function (owner) { 
alert('The album' + this.name + ' belongs to ' + owner); 
});

这里
album.get_owner(function (owner) { 
alert('The album' + this.name + ' belongs to ' + owner); 
});

中的 this.name就能直接取到album对象中的name属性了。
Javascript 相关文章推荐
jQuery UI-Draggable 参数集合
Jan 10 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
JS对象与JSON格式数据相互转换
Feb 20 #Javascript
js 代码优化点滴记录
Feb 19 #Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 #Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 #Javascript
jquery实现奇偶行赋值不同css值
Feb 17 #Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 #Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Python中__call__用法实例
2014/08/29 Python
Python显示进度条的方法
2014/09/20 Python
Python httplib模块使用实例
2015/04/11 Python
python读取二进制mnist实例详解
2017/05/31 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
详解Python locals()的陷阱
2019/03/26 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
物业管理工作方案
2014/05/10 职场文书
模特大赛策划方案
2014/05/28 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
婚庆公司计划书
2014/09/15 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
物业管理交接协议书
2016/03/24 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
写好求职信的技巧解密
2019/05/14 职场文书