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扩展自写的 UI导航
Jan 13 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
node.js实现快速截图
Aug 27 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
PHP7 新增功能
2021/03/09 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
大学生入党思想汇报
2014/01/01 职场文书
技能竞赛活动方案
2014/02/21 职场文书
优秀语文教师事迹
2014/05/18 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
升学宴演讲稿
2014/09/01 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Vue详细的入门笔记
2021/05/10 Vue.js
用php如何解决大文件分片上传问题
2021/07/07 PHP
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis