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 相关文章推荐
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
浅析javascript函数表达式
Feb 10 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
原生js+canvas实现验证码
Nov 29 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP中的session安全吗?
2016/01/22 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
详解Axios统一错误处理与后置
2018/09/26 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python+django快速实现文件上传
2016/10/24 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python中logging日志库实例详解
2020/02/19 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
大学生个人自我鉴定
2013/12/03 职场文书
群众路线对照检查材料
2014/09/22 职场文书
旷课检讨书
2015/01/26 职场文书
员工给公司的建议书
2019/06/24 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书