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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
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 smarty的预保留变量总结
2008/12/04 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android