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 相关文章推荐
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
jQuery常用选择器详解
Jul 17 jQuery
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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中对缓冲区的控制实现代码
2013/09/29 PHP
php实现Session存储到Redis
2015/11/11 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue中监听返回键问题
2019/08/28 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
python encode和decode的妙用
2009/09/02 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
考试没考好检讨书
2014/01/31 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
打架检讨书2000字
2014/02/22 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
银行奉献演讲稿
2014/09/16 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
golang生成vcf通讯录格式文件详情
2022/03/25 Golang