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 相关文章推荐
关于全局变量和局部变量的那些事
Jan 11 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
js中的this关键字详解
Sep 25 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
vue 指定组件缓存实例详解
Apr 01 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
理工科学生的自我评价
2013/12/15 职场文书
人事主管岗位职责
2014/01/30 职场文书
公益广告标语
2014/06/19 职场文书
商务代表岗位职责
2015/02/15 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis