Javascript 面向对象 继承


Posted in Javascript onMay 13, 2010

在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 相关文章推荐
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
sails框架的学习指南
Dec 22 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
Javascript 面向对象 重载
May 13 #Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 #Javascript
限制文本框输入N个字符的js代码
May 13 #Javascript
javascript preload&lazy load
May 13 #Javascript
javascript 当前日期转化为中文的实现代码
May 13 #Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 #Javascript
IE8下关于querySelectorAll()的问题
May 13 #Javascript
You might like
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python opencv如何实现图片绘制
2020/01/19 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
实习鉴定范文
2013/12/19 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
一帮一活动总结
2014/05/08 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
体检通知范文
2015/04/21 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
标准发言稿结尾
2019/07/18 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
手残删除python之后的补救方法
2021/06/26 Python