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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
小程序实现上传视频功能
Aug 18 Javascript
微信小程序实现底部弹出框
Nov 18 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
smarty内置函数config_load用法实例
2015/01/22 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Vue计算属性的使用
2017/08/04 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
js this 绑定机制深入详解
2020/04/30 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
python getopt 参数处理小示例
2009/06/09 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
企业安全生产责任书范本
2014/07/28 职场文书
收款授权委托书
2014/10/02 职场文书
企业务虚会发言材料
2014/10/20 职场文书
乒乓球比赛通知
2015/04/27 职场文书
盲山观后感
2015/06/11 职场文书