JavaScript 学习笔记(九)call和apply方法


Posted in Javascript onJanuary 11, 2010

call和apply方法
call方法可改变上下文this指针,类似的方法还有apply,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。
obj1.method1.call(obj2,argument1,argument2)
如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1…这些做为参数传入。
举一个具体的例子

function add(a, b) { 
alert(a + b); 
} 
function sub(a, b) { 
alert(a - b); 
} 
add.call(sub, 3, 1);

这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
看一个稍微复杂一点的例子
function Class1() { 
this.name = "class1"; this.showNam = function() { 
alert(this.name); 
} 
} 
function Class2() { 
this.name = "class2"; 
} 
var c1 = new Class1(); 
var c2 = new Class2(); 
c1.showNam.call(c2);

注意,call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是:alert("class2");
另外可以用 call 来实现继承
function Class1() { 
this.showTxt = function(txt) { 
alert(txt); 
} 
} function Class2() { 
Class1.call(this); 
} 
var c2 = new Class2(); 
c2.showTxt("cc");

这样 Class2 就继承Class1了,Class1.call(this) 的 意思就是使用 Class1 对象代替this对象,那么 Class2 中不就有Class1 的所有属性和方法了吗,c2 对象就能够直接调用Class1 的方法以及属性了,执行结果就是:alert(“cc”);
这就是 javaScript 如何来模拟面向对象中的继承的,还可以实现多重继承。
function Class10() { 
this.showSub = function(a, b) { 
alert(a - b); 
} 
} function Class11() { 
this.showAdd = function(a, b) { 
alert(a + b); 
} 
} 
function Class2() { 
Class10.call(this); 
Class11.call(this); 
}

1.call方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj 可选项。将被用作当前对象的对象。
arg1, arg2, , argN 可选项。将被传递方法参数序列。
2.apply方法
应用某一对象的一个方法,用另一个对象替换当前对象。
apply([thisObj[,argArray]])
参数
thisObj 可选项。将被用作当前对象的对象。
argArray 可选项。将被传递给该函数的参数数组。

两者的区别
两者实现的功能是完全一样的,只是参数传递方式不一样,call是将各个参数以逗号(,)隔开,而apply是将所有参数组成一个数组进行传递。

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
取选中的radio的值
Jan 11 #Javascript
javascript Object与Function使用
Jan 11 #Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 #Javascript
JavaScript 事件冒泡简介及应用
Jan 11 #Javascript
Javascript 读书笔记索引贴
Jan 11 #Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 #Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
新版PHP极大的增强功能和性能
2006/10/09 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
python的re模块应用实例
2014/09/26 Python
Python入门篇之条件、循环
2014/10/17 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python基础教程项目二之画幅好画
2018/04/02 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python可以实现栈的结构吗
2020/05/27 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
实习生求职自荐信
2014/02/07 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
模具专业求职信
2014/06/26 职场文书
医生个人年终总结
2015/02/28 职场文书
远程教育培训心得体会
2016/01/09 职场文书
2019年思想汇报
2019/06/20 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server