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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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的类树(支持无限分类)
2006/10/09 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Python面向对象类的继承实例详解
2018/06/27 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
美国家居装饰店:Pier 1
2019/09/04 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
力克胡哲观后感
2015/06/10 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫