Javascript 继承实现例子


Posted in Javascript onAugust 12, 2009

1. 创建基类

首先考虑Polygon类。哪些属性和方法是必需的?首先,一定要知道多边形的边数,所以应该加入整数属性sides。还有什么是多边形必需的?也许你想知道多边形的面积,那么加入计算面积的方法getArea()。图4-3展示了该类的UML表示。

Javascript 继承实现例子

图 4-3

Javascript 继承实现例子在UML中,属性由属性名和类型表示,位于紧接类名之下的单元中。方法位于属性之下,说明方法名和返回值的类型。

在ECMAScript中,可以如下编写类:

Javascript 继承实现例子

注意,Polygon类不够详细精确,还不能使用,方法getArea()返回0,因为它只是一个占位符,以便子类覆盖。

2. 创建子类

现在考虑创建Triangle类。三角形具有三条边,因此这个类必须覆盖Polygon类的sides属性,把它设置为3。还要覆盖getArea()方法,使用三角形的面积公式,即1/2×底×高。但如何得到底和高的值呢?需要专门输入这两个值,所以必须创建base属性和height属性。Triangle类的UML表示如图4-4所示。

该图只展示了Triangle类的新属性及覆盖过的方法。如果Triangle类没有覆盖getArea()方法,图中将不会列出它。它将被看作从Polygon类保留下来的方法。完整的UML图还展示了Polygon和Triangle类之间的关系(图4-5),使它显得更清楚。

Javascript 继承实现例子

在UML中,决不会重复显示继承的属性和方法,除非该方法被覆盖(或被重载,这在ECMAScript中是不可能的)。

Triangle类的代码如下:

Javascript 继承实现例子

Javascript 继承实现例子

注意,虽然Polygon的构造函数只接受一个参数sides,Triangle类的构造函数却接受两个参数,即base和height。这因为三角形的边数是已知的,且不想让开发者改变它。因此,使用对象冒充时,3作为对象的边数被传给Polygon的构造函数。然后,把base和height的值赋予适当的属性。

在用原型链继承方法后,Triangle将覆盖getArea()方法,提供为三角形面积定制的计算。

最后一个类是Rectangle,它也继承Polygon。矩形有四条边,面积是用长度×宽度计算的,长度和宽度即成为该类必需的属性。在前面的UML图中,要把Rectangle类填充在Triangle类的旁边,因为它们的超类都是Polygon(如图4-6所示)。

Javascript 继承实现例子

图  4-6

Rectangle的ECMAScript代码如下:

Javascript 继承实现例子Javascript 继承实现例子

Javascript 继承实现例子

注意,Rectangle构造函数不把sides作为参数,同样的,常量4被直接传给Polygon构造函数。与Triangle相似,Rectangle引入了两个新的作为构造函数的参数的属性,然后覆盖getArea()方法。

3. 测试代码

可以运行下面代码来测试为该示例创建的代码:

Javascript 继承实现例子

这段代码创建一个三角形,底为12,高为4,还创建一个矩形,长为22,宽为10。然后输出每种形状的边数及面积,证明sides属性的赋值正确,getArea()方法返回正确的值。三角形的面积应为24,矩形的面积应该是220。

4. 采用动态原型方法如何?

前面的例子用对象定义的混合构造函数/原型方式展示继承机制,那么可以使用动态原型来实现继承机制吗?不能。

继承机制不能采用动态化的原因是,prototype对象的独特本性。看下面代码(这段代码不正确,却值得研究):

Javascript 继承实现例子Javascript 继承实现例子

Javascript 继承实现例子

上面的代码展示了用动态原型定义的Polygon和Triangle类。错误在于突出显示的设置Triangle.prototype属性的代码。从逻辑上讲,这个位置是正确的,但从功能上讲,却是无效的。从技术上说来,在代码运行前,对象已被实例化,并与原始的prototype对象联系在一起了。虽然用极晚绑定可使对原型对象的修改正确地反映出来,但替换prototype对象却不会对该对象产生任何影响。只有未来的对象实例才会反映出这种改变,这就使第一个实例变得不正确。

要正确使用动态原型实现继承机制,必须在构造函数外赋予新的prototype对象,如下所示:

Javascript 继承实现例子

这段代码有效,因为是在任何对象实例化前给prototype对象赋值的。遗憾的是,这意味着不能把这段代码完整的封装在构造函数中了,而这正是动态原型的主旨。

Javascript 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
JQuery jsonp 使用示例代码
Aug 12 #Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 #Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 #Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 #Javascript
jQuery 解析xml文件
Aug 09 #Javascript
ext 代码生成器
Aug 07 #Javascript
JavaScript 的方法重载效果
Aug 07 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php基本函数汇总
2015/07/09 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python操作CouchDB的方法
2014/10/08 Python
jupyter安装小结
2016/03/13 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
白酒市场营销方案
2014/02/25 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis