javascript面向对象之Javascript 继承


Posted in Javascript onMay 04, 2010

上几节讲了 JavaScript 面向对象之命名空间 、 javascript 面向对象的JavaScript类 、 JavaScript 面向对象的之私有成员和公开成员 与 Javascript 面向对象之重载,大家可以先看上面的再继续往下看。

在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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Javascript 面向对象之重载
May 04 #Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 #Javascript
javascript 面向对象的JavaScript类
May 04 #Javascript
JavaScript 面向对象之命名空间
May 04 #Javascript
10个实用的脚本代码工具
May 04 #Javascript
利用location.hash实现跨域iframe自适应
May 04 #Javascript
Array.prototype 的泛型应用分析
Apr 30 #Javascript
You might like
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
Python实现的质因式分解算法示例
2018/05/03 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
关于递归的一道.NET面试题
2013/05/12 面试题
中专自我鉴定范文
2013/10/16 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
求职简历自我评价范例
2014/03/12 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
医学生自荐信范文
2015/03/05 职场文书
无房证明样本
2015/06/17 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
欧元符号 €
2022/02/17 杂记
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript