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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python中的字典使用分享
2016/07/31 Python
OpenCV实现人脸识别
2017/04/07 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python实现多人聊天室
2020/03/31 Python
基于python3生成标签云代码解析
2020/02/18 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
小学教师的自我评价范例
2013/10/31 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
会计岗位职责模板
2014/03/12 职场文书
年终总结会议主持词
2014/03/17 职场文书