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 相关文章推荐
javascript中检测变量的类型的代码
Dec 28 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python 类详解及简单实例
2017/03/24 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
机关搬迁方案
2014/05/18 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
档案管理员岗位职责
2015/02/12 职场文书
乒乓球比赛通知
2015/04/27 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
2016年国培研修日志
2015/11/13 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
java调用Restful接口的三种方法
2021/08/23 Java/Android