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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
微信小程序如何使用云开发
May 17 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
关于uniApp editor微信滑动问题
Jan 15 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连接access数据库
2008/03/27 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
Python中有趣在__call__函数
2015/06/21 Python
python构建深度神经网络(DNN)
2018/03/10 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
小学生春游活动方案
2014/08/20 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
网络销售员岗位职责
2015/04/11 职场文书
会议简讯范文
2015/07/20 职场文书
四群教育工作总结
2015/08/10 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
Mysql数据库group by原理详解
2022/07/07 MySQL