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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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导出excel格式数据问题
2014/03/11 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php session的锁和并发
2016/01/22 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
python重试装饰器示例
2014/02/11 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
费用会计岗位职责
2014/01/01 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
上班迟到检讨书
2015/05/06 职场文书
关于迟到的检讨书
2015/05/06 职场文书
辛亥革命观后感
2015/06/02 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript