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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
vue实现评论列表功能
Oct 25 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
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截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue中$refs的用法及作用详解
2018/04/24 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
素食餐饮项目创业计划书
2014/02/02 职场文书
上课迟到检讨书
2014/02/19 职场文书
个人年终总结开头
2015/03/06 职场文书
北京青年观后感
2015/06/15 职场文书
单身证明范本
2015/06/15 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL