js对象的构造和继承实现代码


Posted in Javascript onDecember 05, 2010
<script> 
//定义js的user对象 
function User(name,age){ 
this.name=name, 
this.age=age, 
this.getName=function(){ 
return this.name; 
}, 
this.getAge=function(){ 
return this.age; 
} 
} 
//实例化一个对象 
var use=new User("aa",21); 
alert(use.name); 
alert(use.getAge()); 
//js对象继承 
/* 
3water.com 在面向对象的编程方法中,对象继承是必不可少的,那么怎么在javascript中实现继承机制呢。由于javascript并不是一个严格的面向对象的语言,因此在对象继承上也显的不一样。我们也来创建一个基类Polygon,代表一个多边形,一个多边形有个共同的属性就是边数(sides)和一个共同的方法计算面积(getAreas)。这样我们的这具Polygon类看起来就像下面这样定义: 
*/ 
function Polygon(iSides){ 
this.sides = iSides; 
} 
Polygon.prototype.getAreas = function(){ 
return 0; 
} 
/* 
因为基类并不能确定面积,因此在这里我们返回为0。 
接着我们就创建一个子类Triangle,一个三角形,显然这个三角形是要从多边形继承的,因此我们要让这个Triangle类继承Polygon类,并且要覆盖Polygon类的getAreas方法来返回三角形的面积。我们来看下在javascript中的实现: 
*/ 
function Triangle(iBase, iHeight){ 
Polygon.call(this,3); //在这里我们用Polygon.call()来调用Polygon的构造函数,并将3作为参数,表示这是一个三角形,因为边是确定的,所以在子类的构造函数中就不需要指定边了 
this.base = iBase; //三角形的底 
this.height = iHeight; //三角形的高 
} 
Triangle.prototype = new Polygon(); 
Triangle.prototype.getAreas = function(){ 
return 0.5 * this.base *this.height; //覆盖基类的getAreas方法,返回三角形的面积 
} /* 
参考上面的实现,我们再定义一个矩形: 
*/ 
function Rectangle(iWidth, iHeight){ 
Polygon.call(this,4); 
this.width = iWidth; 
this.height = iHeight; 
} 
Rectangle.prototype = new Polygon(); 
Rectangle.prototype.getAreas = function(){ 
return this.width * this.height; 
} 
/* 
好了,上面我们定义了一个基类和两个子数,下面我们来测试一个这两个子类是否能正常工作: 
*/ 
var t = new Triangle(3,6); 
var r = new Rectangle(4,5); 
alert(t.getAreas()); //输出9说明正确 
alert(r.getAreas()); //输出20说明正确 
</script>
Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
用 JSON 处理缓存
Apr 27 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
收集的一些Array及String原型对象的扩展实现代码
Dec 05 #Javascript
script标签的 charset 属性使用说明
Dec 04 #Javascript
本地对象Array的原型扩展实现代码
Dec 04 #Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 #Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 #Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 #Javascript
javascript innerHTML使用分析
Dec 03 #Javascript
You might like
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
python对url格式解析的方法
2015/05/13 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
外语专业毕业生个人的自荐信
2013/11/19 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
爱牙日活动总结
2014/08/29 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技