返回顶部

收藏

js对象的构造和继承

更多
<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对象继承
/*
在面向对象的编程方法中,对象继承是必不可少的,那么怎么在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>
//该片段来自于http://outofmemory.cn

标签:javascript,网页设计

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. admin 发表 2014-05-08 06:23:29 JavaScript操作cookie
  2. NetS H 发表 2014-07-21 05:28:33 HTML5 自定义属性 data-* 和 jQuery.data 详解
  3. NetS H 发表 2014-07-21 12:41:04 在 Sublime Text 直接运行 Javascript 调试控制台
  4. 博主 发表 2011-08-15 16:00:00 宏伟的 Vimlike.js 计划
  5. 奈何col 发表 2015-10-22 01:31:30 Three.js入门指南
  6. Kayo 发表 2013-05-30 09:10:43 两道 JavaScript 题目
  7. saber 发表 2015-10-26 12:57:23 别让这五种错误毁了你的交互设计
  8. 新一 发表 2013-06-04 12:47:47 JS倒计时代码
  9. zhu329599788@126 发表 2015-10-27 03:55:10 javascript取得表单对象的几种方法
  10. ToFishes 发表 2013-06-08 08:01:16 判断自己的页面是否被iframe包含引入
  11. ayqy 发表 2015-11-01 13:15:10 JavaScript生成器
  12. sunng 发表 2012-11-19 14:59:28 heatcanvas is available via bower

发表评论