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 相关文章推荐
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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和MySql中计算时间差的方法
2011/04/22 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP中overload与override的区别
2017/02/13 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
超清晰的document对象详解
2007/02/27 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python的列表List求均值和中位数实例
2020/03/03 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
爱情保证书范文
2014/02/01 职场文书
妇女工作先进事迹
2014/08/17 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
感恩父母主题班会
2015/08/12 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers