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实现的UBB编码函数
Mar 09 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP xpath()函数讲解
2019/02/11 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python排序函数的使用方法详解
2020/12/11 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
网络编辑职责
2014/03/01 职场文书
政府信息公开实施方案
2014/05/09 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
教师工作表现评语
2014/12/31 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
初中班干部工作总结
2015/08/10 职场文书