javascript面向对象之Javascript 继承


Posted in Javascript onMay 04, 2010

上几节讲了 JavaScript 面向对象之命名空间 、 javascript 面向对象的JavaScript类 、 JavaScript 面向对象的之私有成员和公开成员 与 Javascript 面向对象之重载,大家可以先看上面的再继续往下看。

在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 相关文章推荐
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
TS 类型兼容教程示例详解
Sep 23 Javascript
Javascript 面向对象之重载
May 04 #Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 #Javascript
javascript 面向对象的JavaScript类
May 04 #Javascript
JavaScript 面向对象之命名空间
May 04 #Javascript
10个实用的脚本代码工具
May 04 #Javascript
利用location.hash实现跨域iframe自适应
May 04 #Javascript
Array.prototype 的泛型应用分析
Apr 30 #Javascript
You might like
PHP新手上路(十三)
2006/10/09 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python中定义结构体的方法
2013/03/04 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python super的使用方法及实例详解
2019/09/25 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
自考自我鉴定范文
2013/10/30 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
法院授权委托书范文
2014/08/02 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
三严三实对照检查材料
2014/09/22 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers