Javascript 继承 (二)

仅仅继承Prototype

添加可以重用的方法和属性到prototype是非常有效率的。如果都这么做的话，为什么不仅仅继承prototype呢。也就是说我们继承prototype比继承new出来的对象要好的多。毕竟这个new的对象包含的代码并不是我们想复用的。

这样继承的优点如下，不用仅仅为了继承而创建一个对象。缩短了查找方法的时间。

更新后的集成代码如下：

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

 测试一下

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

 当查询toString的方法和以前的例子有什么不同么？首先，查询my对象自身的属性，发现没有，再检查prototype，要记住对象的copy并不是值的copy，而是引用。所以它们共同的prototype指向一个地址。也就是说 仅仅检查两个步骤就完成了上面复杂的检查。虽然这个方法很有效率，但是因为指向的是同一地址所以要注意以下的情况。

Triangle.prototype.name = 'Triangle';
var s = new Shape()
s.name;//Triangle

  临时的构造函数 new F()

上面的例子的问题还是很严重的，父对象取到子对象的属性了，必须要解决的。可以想一个中间层打破这个链。

方法就是用个临时的构造函数。

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

  var my = new Triangle(5,10);

  my.getArea();//25

  my.toString();//Triangle

 

  var s = new Shape();

  s.name;//Shape

  这样就避免了上面说的问题。

 

 

 

评论

4 楼 kingtoon 2010-05-13  

此前在博客园里看过关于prototype的讲述,了解了关于new的过程
比如 此句 "var shape = new Shape();"的执行可以分为下面几句:

var shape = function(){};
shape.__proto__ = Shape.prototype;
Shape.call(shape);

所以每当new一个新的对象时 都会通过call 拷贝构造函数里的所有属性

所以通过构造中间函数F的话 如
"F.prototype = Shape.prototype; TwoDShape.prototype = new F(); "

这样 TwoDShape.prototype共享了空函数F 而F也仅仅是通过prototype共享Shape的prototype,而非Shape构造函数里的属性,因此也就让TwoDShape失去了继承Shape的构造函数的所有属性的可能.

3 楼 kingtoon 2010-05-11  

还有一个 这样实现继承和之前的继承还是有区别的.之前的继承是一层层继承的.而加入临时空函数F的话 子类只能是继承父类的prototype熟悉了.
比如说三个函数A,B,C.之前的继承可以实现:C继承B,B继承A,C可以完全继承B的所有属性,在此基础上也可以完全继承A的所有属性,因为这是一个完整的链;而如果加入F的话,就只有父类的prototype链对象了.如例子中:只能是C继承B的prototype和A的prototype,B继承A的prototype属性.C不能继承B的构造函数属性和A的构造函数属性,及B也不能继承A的构造函数属性.
比如在:function TwoDShape(){this.nickname = '2d';};
这样,子类Triangle不能继承TwoDShape的nickname属性.



不过楼主的讲解 让我更加深刻理解JavaScript了
很早就知道JavaScript 但一直都没去进一步了解熟悉她.
楼主的JavaScript讲解 个人感觉还是很不错的 我会继续关注 呵呵

2 楼 kingtoon 2010-05-11  

对于定义两次空函数有些不解 就直接定义一次就可以的 如下面:
function Shape(){};
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function(){return this.name};


function F(){};
F.prototype = Shape.prototype;

function TwoDShape(){};
//TwoDShape.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;
};
//Triangle.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){ return this.side * this.height / 2 ;};

1 楼 kingtoon 2010-05-11  

用个临时的构造函数 实现继承 更复杂了