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 + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
ES6的循环与可迭代对象示例详解
Jan 31 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python中的列表推导浅析
2014/04/26 Python
python字符类型的一些方法小结
2016/05/16 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
留学自荐信的技巧
2013/10/17 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
学生会干部自荐信
2014/02/04 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
Python实现滑雪小游戏
2021/09/25 Python
mysql insert 存在即不插入语法说明
2022/03/25 MySQL