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来定位
Feb 20 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
js中unicode转码方法详解
Oct 09 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
Vue自定义指令详解
Jul 28 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
zend framework重定向方法小结
2016/05/28 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
浅析Python 条件控制语句
2020/07/15 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
ORACLE十问
2015/04/20 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
优秀家长事迹材料
2014/05/17 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
企业愿景口号
2015/12/25 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
新手必备Python开发环境搭建教程
2021/05/28 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle