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左侧多级菜单动态的解决方案
Feb 01 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
小程序采集录音并上传到后台
Nov 22 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python如何实现异步调用函数执行
2019/07/08 Python
Python for循环及基础用法详解
2019/11/08 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python给list排序的简单方法
2020/12/10 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
数控专业毕业生求职信
2014/06/12 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
会计学专业求职信
2014/07/17 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
社区重阳节活动总结
2015/03/24 职场文书