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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
js实现直播点击飘心效果
Aug 19 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按百分比生成缩略图的代码分享
2014/05/10 PHP
php中rename函数用法分析
2014/11/15 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python中的函数作用域
2018/05/07 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
森林防火工作方案
2014/02/14 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
会计求职信范文
2014/05/24 职场文书
幼儿发展评估方案
2014/06/11 职场文书
李强感恩观后感
2015/06/17 职场文书
感恩教育观后感
2015/06/17 职场文书
幼儿园毕业致辞
2015/07/29 职场文书