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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 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
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python 函数基础知识汇总
2018/03/09 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python函数中不定长参数的写法
2019/02/13 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
《藤野先生》教学反思
2014/02/19 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2014年信用社工作总结
2014/11/25 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
干部培训工作总结2015
2015/05/25 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
保留意见审计报告
2015/06/05 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python