Javascript 继承 (一)

关于继承前言

到这里如果看完函数-》对象-》Prototype，已经能应用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;};
}

 看看怎么样来实现继承

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

 

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

让我们来测试下

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

上面的代码没什么可以证明继承的关系。本身getArea函数就是有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)

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

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

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

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

 把共享的属性添加到Prototype中

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

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

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

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

 以上的程序要小心的是，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;};

 测试代码都很正常

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

 

评论

3 楼 风雪涟漪 2009-01-08  

1.先看看这篇文章我们在讨论啊
http://xiayuanfeng.iteye.com/admin/blogs/307152

2.自我感觉用扩展是可以的啊。我是相对TwoDShape.prototype可能造成误会。。

谢谢提问。

2 楼 tom840520 2009-01-08  

1.
# TwoDShape.prototype.constructor = TwoDShape; 
# Triangle.prototype.constructor = Triangle;
如果这两句不加的话，依次执行下来，那么执行到下面的语句，值是否是下面这样。
# var td = new TwoDShape(); 
# td.constructor//TwoDShape===========》//Shape 
# var s = new Shape(); 
# s.constructor//Shape============》//Shape



2.
   1. function Shape(){} 
   2. // 扩展prototype 
   3. Shape.prototype.name = 'shape'; 
   4. Shape.prototype.toString = function() {return this.name;}; 
   5. function TwoDShape(){} 
   6. // 继承之前不要扩展prototype 
   7. TwoDShape.prototype = new Shape(); 
   8. TwoDShape.prototype.constructor = TwoDShape; 
   9. // 继承之后再扩展 
  10. TwoDShape.prototype.name = '2D shape'; 
第10行，我感觉这个应该不是扩展，因为TwoDShape本身就有name属性，用的是TwoDShape里的name,不是Shape里的name,这句只是重新给TwoDShape里的name赋值罢了。

只是一些疑问，望楼主解答。。

1 楼 tom840520 2009-01-08  

1.
# TwoDShape.prototype.constructor = TwoDShape; 
# Triangle.prototype.constructor = Triangle;
如果这两句不加的话，依次执行下来，那么执行到下面的语句，值是否是下面这样。
# var td = new TwoDShape(); 
# td.constructor//TwoDShape===========》//Shape 
# var s = new Shape(); 
# s.constructor//Shape============》//Shape



2.
   1. function Shape(){} 
   2. // 扩展prototype 
   3. Shape.prototype.name = 'shape'; 
   4. Shape.prototype.toString = function() {return this.name;}; 
   5. function TwoDShape(){} 
   6. // 继承之前不要扩展prototype 
   7. TwoDShape.prototype = new Shape(); 
   8. TwoDShape.prototype.constructor = TwoDShape; 
   9. // 继承之后再扩展 
  10. TwoDShape.prototype.name = '2D shape'; 
第10行，我感觉这个应该不是扩展，因为TwoDShape本身就有name属性，用的是TwoDShape里的name,不是Shape里的name,这句只是重新给TwoDShape里的name赋值罢了。

只是一些疑问，望楼主解答。。