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 相关文章推荐
我的javascript 函数链之演变
Apr 07 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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和XSS跨站攻击的防范
2007/04/17 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python实现dijkstra最短路由算法
2019/01/17 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python之列表推导式的用法
2019/11/29 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
新东网科技Java笔试题
2012/07/13 面试题
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
保护环境演讲稿
2014/05/10 职场文书
博士生专家推荐信
2014/09/26 职场文书
2016大学军训心得体会
2016/01/11 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL