面向对象的JavaScript 四 ----- Javascript实现继承的方式（1）

在javascript中，实现继承的方式很多，有12种。本文将会对此作一些介绍。

一，初入继承

首先来看一段代码

function Shape(){
this.name = 'shape';
this.toString = function() {return this.name;};
}
function TwoDShape(){
this.name = '2D shape';
}
function Triangle(side, height) {
this.name = 'Triangle';
this.side = side;
this.height = height;
this.getArea = function(){return this.side * this.height / 2;};
}
TwoDShape.prototype = new Shape();
Triangle.prototype = new TwoDShape();
注意你需要重设构造函数.(这个在上文已经提到了)
TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;

接下来写点代码测试一下效果：
>>> var my = new Triangle(5, 10);

>>> my.toString()

"Triangle"
看上去结果不错，toString()返回了“Triangle”。

这里我要提一下javascript engine在寻找这个toString函数的步骤：

1，首先会遍历所有当前对象的属性，没有找到toString函数

2。然后将会寻找当前对象的__proto__指向的对象，即TwoDShape对象

3，遍历TwoDShape对象的所有属性，仍旧没找到，然后再查找Shape对象

4，遍历Shape对象的所有属性，终于找到了toString函数。因为调用toString函数的上下文环境是Triangle，所以返回的是Triangle的name属性。

然后我们在试验一下instanceof
>>> my instanceof Shape
true
>>> my instanceof TwoDShape
true
>>> my instanceof Triangle
true
>>> my instanceof Array
false
一切正常,然后再试试isPrototypeOf
>>> Shape.prototype.isPrototypeOf(my)
true
>>> TwoDShape.prototype.isPrototypeOf(my)
true
>>> Triangle.prototype.isPrototypeOf(my)
true
>>> String.prototype.isPrototypeOf(my)
false

一切OK。

二，将共享的属性放在prototype中

看来我们的继承实现的不错。但是还是有需要改进的地方。

在介绍下面的内容之前，首先说一下prototype属性的特点。先看一段代码
function Shape(){
this.name = 'shape';
}
这样,name存在每个shape实例中.
function Shape(){}
Shape.prototype.name = 'shape';

这样，所有shape对象共享一个name属性，具体内容在之前的文章已经介绍了。

之前说到改进，在继承的时候，没必要继承所有的属性，最好只继承prototype的属性，所以修改一下继承的实现：

function Shape(){}
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};

function TwoDShape(){}
TwoDShape.prototype = Shape.prototype;
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height) {
this.side = side;
this.height = height;
}
Triangle.prototype = TwoDShape.prototype;
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height ;}
注意，现在找寻toString的流程发生了变化，只有两步了，首先找到当前对象的属性，然后找prototypr指向对象的属性，因为prototype是相等的。注意这里给prototype赋值得代码和之前不同

之前：TwoDShape.prototype = new Shape();

现在：Triangle.prototype = TwoDShape.prototype;

你会指出这样简单拷贝prototype是不正确的，是的，这样确实会带来副作用，比如如下代码：
>>> var s = new Shape()
>>> s.name
"Triangle"

实际上应该返回的是shape，解决方法是：

function Shape(){}
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};

function TwoDShape(){}
var F = function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height) {
this.side = side;
this.height = height;
}
var F = function(){};
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height };

现在好了,试试:
>>> var my = new Triangle(5, 10);
>>> my.getArea()
25
>>> my.toString()
"Triangle"

在试验一下继承：

>> my.__proto__.__proto__.__proto__.constructor
Shape()
>>> var s = new Shape();
>>> s.name
"shape"
这样就没问题了。如果你不理解F.prototype = TwoDShape.prototype;Triangle.prototype = new F();和Triangle.prototype = TwoDShape.prototype的区别， 回去找本javascript的语法书翻一下。如果你翻的书上没讲这个内容，那你可以把那本书扔了，告诉你的朋友千万别在读那本书了。

三，访问子类的父类

如果我们需要象java里的super一样访问父类的方法时，该怎么办？我的解决方法是，定义一个uber属性

Tips：为什么不用super？很简单，因为super是保留字

废话少说，代码如下：

function Shape(){}
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){
var result = [];
if (this.constructor.uber) {
result[result.length] = this.constructor.uber.toString();
}
result[result.length] = this.name;
return result.join(', ');
};
function TwoDShape(){}
var F = function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.uber = Shape.prototype;
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height) {
this.side = side;
this.height = height;
}
var F = function(){};
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.uber = TwoDShape.prototype;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height ;}

注意,还修改了toString的实现:,现在调用的效果如下>>> var my = new Triangle(5, 10);
>>> my.toString()
"shape, 2D shape, Triangle"
很不错吧。

关于继承还有很多内容可讲，我会在之后的文章中一一道来。