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 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
shiro授权的实现原理
2017/09/21 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
详解python中index()、find()方法
2019/08/29 Python
Python 实现简单的客户端认证
2020/07/29 Python
Django配置跨域并开发测试接口
2020/11/04 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
财务工作个人总结
2015/02/27 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
活着观后感
2015/06/03 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
详解vue中v-for的key唯一性
2021/05/15 Vue.js
图文详解matlab原始处理图像几何变换
2021/07/09 Python