js中继承的实现方式

今天开始学习js,看到了js继承的方式.记录下来:

利用对象的call方法对父类进行初始化:下面用经典的图形例子来说明:

先定义一个形状Polygon

js 代码

1. function Polygon(iSides) {   
2.     this.sides = iSides;   
3.  }   
4.     
5.  Polygon.prototype.getArea = function() {   
6.     return 0;   
7.  }  

下面定义两个子类,一个三角形Triangle,一个矩形Rectangle:

三角形;

js 代码

1. function Triangle(iBase,iHeight) {   
2.     //key:initialize base class   
3.     Polygon.call(this,3);   
4.     this.base = iBase;   
5.     this.height = iHeight;   
6.  }   
7.     
8.  Triangle.prototype = new Polygon();   
9.     
10.  //override base class mothed   
11.  Triangle.prototype.getArea = function() {   
12.     return 0.5 * this.base * this.height;   
13.  }  

 矩形:

js 代码

1. function Rectangle(iLenght,iWidth) {   
2.     Polygon.call(this,4);   
3.     this.length = iLenght;   
4.     this.width = iWidth;   
5.  }   
6.     
7.  Rectangle.prototype = new Polygon();   
8.     
9.  Rectangle.prototype.getArea = function() {   
10.     return this.length * this.width;   
11.  }  

测试一下:

js 代码

1. function testFunc() {   
2.     var triangle = new Triangle(12,4);   
3.     var rectangle = new Rectangle(22,10);   
4. //  alert(triangle.sides);   
5. //  alert(triangle.getArea());   
6.     alert("[ " +triangle.sides + " : " + triangle.getArea() + " ][ " + rectangle.sides + " : " + rectangle.getArea() + " ]");   
7.        
8.  }  

新建一个html界面进行调用,用于本js是定义到一个单独的js文件中,需要在html中引入此js文件

js 代码

1. <script type=< span="">"text/javascript" src="test.js"></script>  

运行结果为:

见附件图面...