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的tab切换效果代码[代码分离]
Apr 11 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
js+canvas实现画板功能
Sep 13 Javascript
原生js生成图片验证码
Oct 11 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面向对象 字段的声明与使用
2012/06/14 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
python基础while循环及if判断的实例讲解
2017/08/25 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python如何批量生成和调用变量
2020/11/21 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
经济系大学生求职信
2013/10/01 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
交通事故检查书范文
2014/01/30 职场文书
大学生创业策划书
2014/02/02 职场文书
cf战队收人广告词
2014/03/14 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
检讨书格式范文
2015/05/07 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书