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操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
详解Vue SPA项目优化小记
Jul 03 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
JS实现页面数据懒加载
Feb 13 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 HTML代码串 截取实现代码
2009/06/29 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
canvas知识总结
2017/01/25 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python+Wordpress制作小说站
2017/04/14 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
django 信号调度机制详解
2019/07/19 Python
python实现单机五子棋
2020/08/28 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
建筑公司员工自我鉴定
2014/04/08 职场文书
低碳生活倡议书
2014/04/14 职场文书
财务管理专业自荐书
2014/09/02 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
资料员岗位职责
2015/02/10 职场文书
教师个人教学反思
2016/02/23 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python