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 相关文章推荐
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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使用header()输出图片缓存实例
2014/12/09 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
JS实现简易日历效果
2021/01/25 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python的动态重新封装的教程
2015/04/11 Python
windows下python和pip安装教程
2018/05/25 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
pandas的qcut()方法详解
2019/07/06 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
某科技软件测试面试题
2013/05/19 面试题
教师求职信范文分享
2013/12/27 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
买房协议书范本
2014/10/23 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
干部培训简讯
2015/07/20 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS