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访问XML数据的实例
Dec 27 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
js验证上传图片的方法
May 12 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
微信封装的调用微信签名包的类库
2017/06/08 PHP
javascript 打印页面代码
2009/03/24 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python实现图书借阅系统
2019/02/20 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
python实现图片素描效果
2020/09/26 Python
Python collections模块的使用方法
2020/10/09 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
实用求职信范文分享
2013/12/25 职场文书
自我介绍演讲稿
2014/01/15 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
老人院义工活动感想
2015/08/07 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
分享7个 Python 实战项目练习
2022/03/03 Python