javascript 面向对象编程基础 多态


Posted in Javascript onAugust 21, 2009

Javascript已经可以模拟出面向对象的封装和继承特性,但是不幸的是Javascript对多态特性的支持非常弱!其它面向对象语言的多态一般都由方法重载和虚方法来实现多态,Javascript也通过这两种途径来实现!

重载:由于Javascript是弱类型的语言,而且又支持可变参数,当我们定义重载方法的时候,解释器无法通过参数类型和参数个数来区分不同的重载方法,因此方法重载是不被支持的!当先后定义了同名的方法的时候,后定义的方法会覆盖先定义的方法!

既然解释器无法分辨重载方法,那就手动区分不同的方法:

var MyClass=function(){ 
var AddNum=function(a,b){ 
return a+b; 
} 
var AddString=function(a,b){ 
return "I am here"+a+b; 
} 
this.Add=function(a,b){ 
if(typeof(a)=="number") 
return AddNum(a,b); 
else 
return AddString(a,b); 
} 
} 
var MyObj = new MyClass(); 
var X = MyObj.Add(5,6); 
var Y = MyObj.Add("A","FFFFFF"); 
alert(X); //结果:11 
alert(Y); //结果:I am hereAFFFFFF

虚方法:
function BaseClass(){ 
this.Hello=function(){ 
return this.Say(); 
} 
} 
function MyClassA(){ 
this.Say=function(){ 
return "Hello"; 
} 
} 
function MyClassB(){ 
this.Say=function(){ 
return "This is MyClassB"; 
} 
} 
MyClassA.prototype = new BaseClass(); 
MyClassB.prototype = new BaseClass(); 
var ObjA = new MyClassA(); 
var XX = ObjA.Hello(); 
alert(XX); //结果:Hello 
var ObjB = new MyClassB(); 
var YY = ObjB.Hello(); 
alert(YY); //结果:This is MyClassB

由于Javascript解释执行的特性,因此可以再基类中调用将要在派生类中定义的方法,那么这个基类方法就相当于虚方法,可以实现模拟多态!
js的重载和重写(覆写):
重载的意思是,“同一个名字的函数(注意这里包括函数)或方法可以有多个实现,它们依靠参数的类型和(或)参数的个数来区分识别”。而重写(覆盖)的意思是,“子类中可以定义与父类中同名,并且参数类型和个数也相同的方法,这些方法的定义后,在子类的实例化对象中,父类中继承的这些同名方法将被隐藏”。重载的英文是overload,覆盖的英文是override。好了,概念介绍到这里,你猜到我要说什么了吗?嘿嘿,Code is cheap.看重载代码:
// 通过函数的arguments属性实现重载 
function add() { 
var sum = 0 ; 
for ( var i = 0 ; i < arguments.length; i ++ ) { 
sum += arguments[i]; 
} 
return sum; 
} 
function test() { 
alert(add()); 
alert(add( 1 , 2 )); 
alert(add( 1 , 2 , 3 )); 
}

通过代码运行结果,这样就实现了任意多个参数加法函数的重载了。当然,你还可以在函数中通过 instanceof 或者 constructor 来判断每个参数的类型,来决定后面执行什么操作,实现更为复杂的函数或方法重载。总之,javascript 的重载,是在函数中由用户自己通过操作 arguments 这个属性来实现的。关于arguments的特性,前面我已经做了简单介绍,参考拙文:http://blog.csdn.net/zhanglingdll_39/archive/2009/08/20/4465670.aspx 。
下面重点理解js重写的实现:
// 为类添加静态方法inherit表示继承于某类
Function.prototype.inherit = function (baseClass) {
for ( var p in baseClass.prototype) {
this .prototype[p] = baseClass.prototype[p];
}
}
// js实现重写
function parentClass() { // 父类
}
parentClass.prototype.method = function () {
alert( " parentClass method " );
}
function subClass() { // 子类
}
//
下面这一句和subClass.prototype = new parentClass();等价 
subClass.inherit(parentClass); 
// subClass.prototype.method = function() { // 子类重写了父类的方法 -- 去掉注释运行试试看 
// alert("subClass method"); 
// } 
function test() { 
var obj = new subClass(); 
obj.method(); 
} 
这样,子类中定义的method 就覆盖了从父类中继承来的method 方法了。这是你可能会问,如何在子类中调用父类的method方法呢?好的,看实现如下: 
// 为类添加静态方法inherit表示继承于某类 
Function.prototype.inherit = function (baseClass) { 
for ( var p in baseClass.prototype) { 
this .prototype[p] = baseClass.prototype[p]; 
} 
} 
/* 参考文章:http://menjoy.javaeye.com/blog/127847 */ 
// js实现重写 
function parentClass() { 
this .method = function () { 
alert( " parentClass method " ); 
} 
} 
function subClass() { 
var method = this .method; 
this .method = function () { 
method.call( this ); 
alert( " subClass method " ); 
} 
} 
subClass.prototype = new parentClass(); 
// subClass.inherit(parentClass); //这一句貌似和上一句subClass.prototype = new parentClass();等价,其实呢????(注释上一行,运行这一行看看) 
subClass.prototype.constructor = subClass; 
function test() { 
var obj = new subClass(); 
obj.method(); 
}

好了,关于多态的介绍就到这里。js面向对象编程犹如浩瀚海洋广阔无边,我这三篇参考别人的文章写出来的js面向对象基础只能当作入门者学习的参考。学无止境,参考了网上几篇老大们的牛文,深知自身技术的浅薄,对于已经超越了解阶段的读者,还是看看园子里高人的技术文章吧。我这里要先拜谢园子里的高人了。
Javascript 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
javascript 面向对象编程基础:继承
Aug 21 #Javascript
javascript 面向对象编程基础:封装
Aug 21 #Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 #Javascript
javascript 自定义事件初探
Aug 21 #Javascript
IE 下的只读 innerHTML
Aug 21 #Javascript
JS 控制CSS样式表
Aug 20 #Javascript
JS获取父节点方法
Aug 20 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
详解Vue3中对VDOM的改进
2020/04/23 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python解析树及树的遍历
2016/02/03 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python内打印变量之%和f的实例
2020/02/19 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
义和团口号
2014/06/17 职场文书
护士医德医风自我评价
2014/09/15 职场文书
先进个人申报材料
2014/12/30 职场文书
党员转正意见怎么写
2015/06/03 职场文书
结婚主持人致辞
2015/07/28 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技