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 相关文章推荐
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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 socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python中运算符"=="和"is"的详解
2016/10/08 Python
python中解析json格式文件的方法示例
2017/05/03 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
大学生就业求职信
2014/06/12 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
人才市场接收函
2015/01/30 职场文书
法制主题班会教案
2015/08/13 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
python实现三次密码验证的示例
2021/04/29 Python