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数组长度问题代码说明
Jan 20 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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 form 表单传参明细研究
2009/07/17 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
提高php编程效率技巧
2015/08/13 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php和asp语法上的区别总结
2019/05/12 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python3编码问题汇总
2016/09/06 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python如何使用腾讯云发送短信
2020/09/17 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
六一儿童节标语
2014/10/08 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android