Javascript 面向对象 继承


Posted in Javascript onMay 13, 2010

在JavaScript中实现继承可以有多种方法,下面说两种常见的。

一,call 继承,先看代码:

先定义一个“人”类

//人类 
Person=function(){ 
this.name="草泥马"; 
this.eat=function(){ 
alert("我要吃饭"); 
} 
this.sleep=function(){ 
alert("我要睡觉"); 
} 
}

再定义一个学生类,让它继承于Person

//学生类 
Student=function(){ 
Person.call(this);//继承Person类 
this.doHomework=function(){ 
alert("老师来了,作业借我抄下"); 
} 
}

关键看 Person.call(this)这句,其中this代表当前对象,即Student ,这很容易理解,而Person.call(this)的意思是:将Person类的所有的公开成员“附加”给Student类,让Student也具有了Person的所有功能。

和高级语言一样,如果子类中出现了和父类中同名的成员,则会将其覆盖,也就是所谓的“重写”了。

同样的,我们再定义一个女孩类 :

//女孩类 
Girl=function(){ 
Person.call(this);//继承Person类 
this.sex="女"; 
} 
JavaScript是可以实现多重继承的,请看下面的Master(硕士)类,这个Master 自然是个学生,但同时又是个漂亮MM,于是有了下面的代码: 
//硕士类 
Master=function(){ 
Student.call(this);//继承Student类 
Girl.call(this);//继承Girl类 
this.degree="硕士";//学历 
}

我们可以测试一下:

var master=new Master(); 
master.name="凤姐"; 
master.eat(); 
master.doHomework(); 
alert("偶是名字叫:"+master.name); 
alert("偶的性别是:"+master.sex);

多重继承时要注意顺序,如果两个类中有相同名称的成员,那么后一个将覆盖前一个,也就是说当前类只会继承后一个类中的成员。

call 方法继承就说到这,如果大家对call方法不清楚,就请去问问谷歌兄,我就不赘述了,网上转载得不要太多。下面说下另外一种继承方式。

二,prototype 原型继承:

我们再定义一个班长类:

//班长类 
SquadLeader=function (){ 
//打招呼 
this.hi=function(){ 
alert("同学们好,我现在是班长了"); 
} 
}

上面定义了一个硕士类,现在这个硕士被提升为班长了,所以这个Master要继承SquadLeader了,这次我们用prototype 来实现,请看下面代码:

Master.prototype=new SquadLeader();//prototype 属性指向一个对象
//或者
//Master.prototype=SquadLeader.prototype;

这样Master就继承了SquadLeader类,就这么一句话,这里有两种形式,其实原理是一样的。意思是:将SquadLeader的“灵魂”拷贝给了Master,于是从此SquadLeader能做的事,Master都可以做了。
  测试一下:
var master=new Master();
master.hi()//输出“同学们好,我现在是班长了”



我个人比较喜欢用第一种方案(call 继承)来实现继承,所有代码都包在一个“{}”内,一目了然,在书写风格上较之于第二种更接近于C#。prototype 属性我一般用来对已有的类做扩展。

JavaScript是门非常灵活的语言,实现继承可能还有其他更好的方式,大家可以去研究挖掘,我在这就当是抛了块砖头, 希望能引出华美的玉石!

Javascript 相关文章推荐
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
Javascript 面向对象 重载
May 13 #Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 #Javascript
限制文本框输入N个字符的js代码
May 13 #Javascript
javascript preload&lazy load
May 13 #Javascript
javascript 当前日期转化为中文的实现代码
May 13 #Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 #Javascript
IE8下关于querySelectorAll()的问题
May 13 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php实现微信发红包
2015/12/05 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Ajax的优点和缺点
2014/11/21 面试题
大学生学业生涯规划
2014/01/05 职场文书
雷人标语集锦
2014/06/19 职场文书
小学清明节活动总结
2014/07/04 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android