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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 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调用数据库的存贮过程!
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
考博专家推荐信
2014/05/10 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js