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 相关文章推荐
Javascript this指针
Jul 30 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
python读取oracle函数返回值
2016/07/18 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
关于Python的一些学习总结
2018/05/25 Python
python实现自动发送邮件
2018/06/20 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
进修护士自我鉴定
2013/10/14 职场文书
消防安全管理制度
2014/02/01 职场文书
技校毕业生自荐书
2014/05/23 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
捐书倡议书
2014/08/29 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书