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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
es6函数之箭头函数用法实例详解
Apr 25 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中将网址转换为超链接的函数
2011/09/02 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python pandas用法最全整理
2019/08/04 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
python求质数列表的例子
2019/11/24 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
捐助倡议书
2015/01/19 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书