当前位置： 代码迷 >> JavaScript >> JavaScript沿袭方式（1）
  详细解决方案

JavaScript沿袭方式（1）

热度：315   发布时间：2012-12-27 10:17:10.0
JavaScript继承方式（1）

前段时间温故了下JS OO之写类方式，从这篇开始我们看看JS OO之继承方式。

面向对象的语言多数都支持继承，继承最重要的优点就是代码复用，从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法，就称之为继承。 从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JS库继承方式也各不相同。从最简单的 复用开始。

?

1、构造函数方式写类，通过方法调用复制父类属性/字段到子类 实现继承

这里父类，子类都采用构造函数方式写，不用原型。子类调用父类函数来复制父类的属性。

view source print ?
01 /**
02 ? * 父类Polygon:多边形
03 ? * @param {Object} sides
04 ? */
05 function Polygon(sides) {
06 ???? this .sides = sides;
07 ???? this .setSides = function (s) { this .sides=s;}
08 }
09 ?
10 /**
11 ? * 子类Triangle:三角形
12 ? */
13 function Triangle() {
14 ???? this .tempfun = Polygon; //父类引用赋值给子类的一个属性tempfun
15 ???? this .tempfun(3); //调用
16 ???? delete this .tempfun; //删除该属性
17 ???? this .getArea = function (){};
18 }
19 ?
20 //new个对象
21 var tri = new Triangle();
22 console.log(tri.sides); //继承的属性
23 console.log(tri.setSides); //继承的方法
24 console.log(tri.getArea); //自有的方法
25 ?
26 //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
27 console.log(tri instanceof Triangle); //true
28 console.log(tri instanceof Polygon); //false

因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。

view source print ?
01 function Triangle() {
02 ???? Polygon.call( this ,3); //call方式调用父类
03 ???? this .getArea = function (){};???
04 }
05 function Triangle() {
06 ???? Polygon.apply( this ,[3]); //apply方式调用父类
07 ???? this .getArea = function (){};
08 }
09 function Triangle() {
10 ???? var temp = new Polygon(3); //new方式调用父类
11 ???? for (atr in temp) { //全部复制给子类
12 ???????? this [atr] = temp[atr];
13 ???? }??
14 ???? this .getArea = function (){};
15 }

这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。

?

2、原型方式写类，原型方式继承

core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。?

view source print ?
01 /**
02 ? * 父类Polygon:多边形
03 ? *
04 ? */
05 function Polygon() {}
06 Polygon.prototype.sides = 0;
07 Polygon.prototype.setSides = function (s) { this .sides=s;}
08 ?
09 /**
10 ? * 子类Triangle:三角形
11 ? */
12 function Triangle() {}
13 Triangle.prototype = new Polygon(); //这是原型继承关键的一句
14 Triangle.prototype.getArea = function (){}
15 ?
16 //new个对象
17 var tri = new Triangle();
18 console.log(tri.sides); //继承的属性
19 console.log(tri.setSides); //继承的方法
20 console.log(tri.getArea); //自有方法
21 ?
22 //instanceof测试
23 console.log(tri instanceof Triangle); //true，表明该对象是三角形
24 console.log(tri instanceof Polygon); //true，表明三角形也是多边形

虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides，但sides是0，怎么会是三角形呢。还得调用下 tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数，即是原型方式的缺点。优点是正确的维护了"is a"的关系。

?

3、组合构造函数/原型方式写类，采用前面种方式继承

这种方式父类，子类的属性都挂在构造函数里，方法都挂在原型上。

view source print ?
01 /**
02 ? * 父类Polygon:多边形
03 ? */
04 function Polygon(sides) {
05 ???? this .sides = sides;
06 }
07 Polygon.prototype.setSides = function (s) { this .sides=s;}
08 ?
09 /**
10 ? * Triangle 三角形
11 ? * @param {Object} base 底
12 ? * @param {Object} height 高
13 ? */
14 function Triangle(base,height) {
15 ???? Polygon.call( this ,3); //复制父类属性给自己
16 ???? this .base = base;
17 ???? this .height = height;
18 }
19 Triangle.prototype = new Polygon(); //复制父类方法给自己
20 ?
21 Triangle.prototype.getArea = function (){ //最后定义自己的方法
22 ???? return this .base* this .height/2;
23 }
24 ?
25 //new个对象
26 var tri = new Triangle(12,4);
27 console.log(tri.sides); //继承的属性
28 console.log(tri.setSides); //继承的方法
29 console.log(tri.base); //自有属性
30 console.log(tri.height); //自有属性
31 console.log(tri.getArea); //自有方法
32 ?
33 //instanceof测试，表明正确的维护了"is a"的关系
34 console.log(tri instanceof Triangle); //true，表明该对象是三角形
35 console.log(tri instanceof Polygon); //true，表明三角形也是多边形
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.