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 相关文章推荐
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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
php实现加减法验证码代码
2014/02/14 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python实现用户名密码校验
2020/03/18 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
2014年清明节寄语
2014/04/03 职场文书
活动总结书
2014/05/08 职场文书
推广普通话的宣传语
2015/07/13 职场文书