About prototype

  1、prototype作为JavaScript·的原型，通过它可以实现代码的OO和reuse。

第一个例子先熟悉prototype的定义和使用语法

写道

function Triangle(side,length){

this.side = side;

this.length = length;

this.getArea = function(){

return this.side * this.length;

}

}

 

 

 

写道

function shape(){

this.name = name;

this.toString = function(){

return this.name;

}}

 

var t = new Triangle(3,6);

t.constructor;// Triangle(side, length)

Triangle.prototype;// Object{}

Triangle.prototype = new shape();

t.constructor;//Triangle(side, length)

var s = new Triangle(35,6);

s.constructor;//  shape()

Triangle.prototype.constructor = Triangle;

s.constructor;// Triangle(side,length)

s.instanceof shape;// true

s.instanceof Triangle;// true

s.instanceof String// false

 对于以上这种方法，它的缺点是：无法对prototype进行扩展，而且只能提供它本身的一些properities无法达到复用的效果；在运行过程中，engine需要进行多次的lookups，每次运行都要new一个实例，并且找的的实例的value值，在效率上应该可以更优化。

 

2.优化

写道

function shape(){}
>>> shape,prototype.name = 'shpae';
"shape"
>>> shape.prototype.toString = function(){return this.name;}
function()
>>> function Triangle(side,height){this.side = side;this.height = height;}
>>> Triangle.prototype = shape.prototype;
shape { name="shape"}
>>> Triangle.prototype.constructor = Triangle;
Triangle(side, height)
>>> Triangle.prototype.name = 'Triangle';
"Triangle"
>>> Triangle.prototype.getArea = function(){return this.side * this.height;}
function()
>>> var t = new Triangle(3,5);
>>> t.getArea();
15
>>> t.toString();
"Triangle"
>>> t.name;
"Triangle"

 这与1的不同点是，每次寻找的是一个指针。缩短了寻找时间。

 

缺点：

写道

var s = new shape();
s.name; // "Triangle"

 因为所有的父函数和子函数都指向同一个对象（shape.prototype），所以子类的修改对父类产生了影响。

 

3、再次优化---利用中介构造器———F（）

 

写道

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

function Triangle(side,length){
this.side = side;
this.length = length
}
var F = function(){}
F.prototype = shape.prototype;

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

 

写道

var s = new shape();
s.name;// "shape"
var t = new Triangle(3,5);
t.toString();//"Triangle"