javascript继承类

Prototype Chaining

让我们用默认的方法来实现继承。

前面的教程我们知道了每个函数都有prototype属性，当函数被new操作符调用，一个对象就被创建了并且这个对象关联到了prototype对象。是怎样关联的？其实是通过_proto_(在有些环境叫_proto_)，通过它的链接就可以使新建的对象访问prototype对象了。

prototype本身就是个对象，因此它也可以链接到自身的prototype，也就是Prototype链。

Prototype Chaining的例子

用prototype chaining实现继承,先定义三个构造函数

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;};
}

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 = new Shape();
Triangle.prototype = new TwoDShape();

TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;

TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;

让我们来测试下

var my = new Triangle(5, 10);
my.getArea();//25

var my = new Triangle(5, 10);
my.getArea();//25

上面的代码没什么可以证明继承的关系。本身getArea函数就是有Triangle自身定义的。看看下面的代码

my.toString();//Triangle

my.toString();//Triangle

虽然my对象并没有toString的方法，但是它继承了Shape.就可以调用toString的方法了。

让我们看看javascript引擎是怎样工作的.

• 首先先循环my对象的属性，发现没有toString的方法。
• 通过_proto_的链接找到对象，也就是TwoDShape()创建的对象。
• 接下来又开始循环TwoDShape的实例，发现也没有toString的方法。然后又会检查_proto_指向的对象。也就是Shape创造的对象。
• 终于在Shape的实例中，找到了toString方法。
• 最终toString方法在my的上下文中被调用。意思就是this指向了my对象。

再让我们来看看my的构造函数是什么

my.constructor ;//Triangle(side,height)

my.constructor ;//Triangle(side,height)

可以用instanceof 来验证 my是否属于三个构造函数的实例

my instanceof Shape//true

my instanceof TwoDShape//true

my instanceof Triangle//true

my instanceof Array//false

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

Shape.prototype.isPrototypeOf(my) //true

TwoDShape.prototype.isPrototypeOf(my) //true

Triangle.prototype.isPrototypeOf(my) //true

String.prototype.isPrototypeOf(my) //false

同样的我们在创建两个对象和上面的例子都一样

var td = new TwoDShape();
td.constructor//TwoDShape
var s = new Shape();
s.constructor//Shape

var td = new TwoDShape();
td.constructor//TwoDShape
var s = new Shape();
s.constructor//Shape

把共享的属性添加到Prototype中

当创建一个构造函数的时候，自身的属性添加都用this.看个例子

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

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

当这样定义name的时候，也就是用Shape构造函数每创建一个函数都会在内存中创建一个name属性。另一个方法就是把name属性添加到prototype属性中，并共享所有的实例。

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

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

这种情况的时候，每创建一个对象就不会有自身的属性name了。但是可以用prototype的name属性。

看个更深的例子，

function Shape(){}
// 扩展prototype
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};
function TwoDShape(){}
// 继承之前不要扩展prototype
TwoDShape.prototype = new Shape();
TwoDShape.prototype.constructor = TwoDShape;
// 继承之后再扩展
TwoDShape.prototype.name = '2D shape';

function Shape(){}
// 扩展prototype
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};
function TwoDShape(){}
// 继承之前不要扩展prototype
TwoDShape.prototype = new Shape();
TwoDShape.prototype.constructor = TwoDShape;
// 继承之后再扩展
TwoDShape.prototype.name = '2D shape';

以上的程序要小心的是，TwoDShape继承之前不要扩展它的prototype。也就是继承之前扩展prototype都是无效的 了。（详情请看prototype的学习）.

Triangle的构造函数还是和其他有点不同，本身每次创建一个Triangle都会有很多不同的面积。因此把side和height属性作为自身变量是可行的。代码如下：

function Triangle(side, height) {
  this.side = side;
  this.height = height;
}

Triangle.prototype = new TwoDShape();
Triangle.prototype.constructor = Triangle;

Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height
/ 2;};

function Triangle(side, height) {
  this.side = side;
  this.height = height;
}

Triangle.prototype = new TwoDShape();
Triangle.prototype.constructor = Triangle;

Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height 
/ 2;};

测试代码都很正常

var my = new Triangle(5, 10);
my.getArea();//25
my.toString();//Triangle