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 事件冒泡简介及应用
Jan 11 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
Element Input组件分析小结
Oct 11 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
js利用iframe实现选项卡效果
Aug 09 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入门
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
jquery实现excel导出的方法
2013/04/04 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
python编写的最短路径算法
2015/03/25 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
django中related_name的用法说明
2020/05/20 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
交通专业个人自荐信格式
2013/09/23 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
岗位安全生产责任书
2014/07/28 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
联欢会开场白
2015/06/01 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL