不是原型继承那么简单！prototype的深度探索（2）

2 prototype使用技巧

      在了解prototype的使用技巧之前，首要先弄明白prototype的特性。首先，JavaScript为每一个类型(Type)都提供了一个prototype属性，将这个属性指向一个对象，这个对象就成为了这个类型的“原型”，这意味着由这个类型所创建的所有对象都具有这个原型的特性。另外，JavaScript的对象是动态的，原型也不例外，给prototype增加或者减少属性，将改变这个类型的原型，这种改变将直接作用到由这个原型创建的所有对象上，例如：

<script>function Point(x,y){this.x = x;this.y = y;}var p1 = new Point(1,2);var p2 = new Point(3,4);Point.<strong>prototype</strong>.z = 0; //动态为Point的原型添加了属性alert(p1.z);alert(p2.z);  //同时作用于Point类型创建的所有对象</script>

如果给某个对象的类型的原型添加了某个名为a的属性，而这个对象本身又有一个名为a的同名属性，则在访问这个对象的属性a时，对象本身的属性“覆盖”了原型属性，但是原型属性并没有消失，当你用delete运算符将对象本身的属性a删除时，对象的原型属性就恢复了可见性。利用这个特性，可以为对象的属性设定默认值，例如：

<script>function Point(x, y){if(x) this.x = x;if(y) this.y = y;}Point.<strong>prototype</strong>.x = 0;Point.<strong>prototype</strong>.y = 0;var p1 = new Point;var p2 = new Point(1,2);</script>

上面的例子通过prototype为Point对象设定了默认值(0,0)，因此p1的值为(0,0)，p2的值为(1,2)，通过delete p2.x, delete p2.y; 可以将p2的值恢复为(0,0)。下面是一个更有意思的例子：

<script>function classA(){this.a = 100;this.b = 200;this.c = 300;this.reset = function(){for(var each in this){delete this[each];}}}classA.<strong>prototype</strong> = new classA();var a = new classA();alert(a.a);a.a *= 2;a.b *= 2;a.c *= 2;alert(a.a);alert(a.b);alert(a.c);a.reset();   //调用reset方法将a的值恢复为默认值alert(a.a);alert(a.b);alert(a.c);</script>

利用prototype还可以为对象的属性设置一个只读的getter，从而避免它被改写。下面是一个例子：

<script>function Point(x, y){if(x) this.x = x;if(y) this.y = y;}Point.<strong>prototype</strong>.x = 0;Point.<strong>prototype</strong>.y = 0;function LineSegment(p1, p2){//私有成员var m_firstPoint = p1;var m_lastPoint = p2;var m_width = {valueOf : function(){return Math.abs(p1.x - p2.x)},toString : function(){return Math.abs(p1.x - p2.x)}}var m_height = {valueOf : function(){return Math.abs(p1.y - p2.y)},toString : function(){return Math.abs(p1.y - p2.y)}}//getterthis.getFirstPoint = function(){return m_firstPoint;}this.getLastPoint = function(){return m_lastPoint;}this.length = {valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}}}var p1 = new Point;var p2 = new Point(2,3);var line1 = new LineSegment(p1, p2);var lp = line1.getFirstPoint();lp.x = 100;  //不小心改写了lp的值，破坏了lp的原始值而且不可恢复alert(line1.getFirstPoint().x);alert(line1.length); //就连line1.lenght都发生了改变</script>

将this.getFirstPoint()改写为下面这个样子：

this.getFirstPoint = function()
{
        function GETTER(){};
        GETTER.prototype = m_firstPoint;
        return new GETTER();
}

则可以避免这个问题，保证了m_firstPoint属性的只读性。

<script>function Point(x, y){if(x) this.x = x;if(y) this.y = y;}Point.<strong>prototype</strong>.x = 0;Point.<strong>prototype</strong>.y = 0;function LineSegment(p1, p2){//私有成员var m_firstPoint = p1;var m_lastPoint = p2;var m_width = {valueOf : function(){return Math.abs(p1.x - p2.x)},toString : function(){return Math.abs(p1.x - p2.x)}}var m_height = {valueOf : function(){return Math.abs(p1.y - p2.y)},toString : function(){return Math.abs(p1.y - p2.y)}}//getterthis.getFirstPoint = function(){        function GETTER(){};        GETTER.<strong>prototype</strong> = m_firstPoint;        return new GETTER();}this.getLastPoint = function(){        function GETTER(){};        GETTER.<strong>prototype</strong> = m_lastPoint;        return new GETTER();}this.length = {valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}}}var p1 = new Point;var p2 = new Point(2,3);var line1 = new LineSegment(p1, p2);var lp = line1.getFirstPoint();lp.x = 100;  //不小心改写了lp的值，但是没有破坏原始的值alert(line1.getFirstPoint().x);alert(line1.length); //line1.lenght不发生改变</script>

实际上，将一个对象设置为一个类型的原型，相当于通过实例化这个类型，为对象建立只读副本，在任何时候对副本进行改变，都不会影响到原始对象，而对原始对象进行改变，则会影响到副本，除非被改变的属性已经被副本自己的同名属性覆盖。用delete操作将对象自己的同名属性删除，则可以恢复原型属性的可见性。下面再举一个例子：

<script>function Polygon(){var m_points = [];m_points = Array.apply(m_points, arguments);function GETTER(){};GETTER.<strong>prototype</strong> = m_points[0];this.firstPoint = new GETTER();this.length = {valueOf : function(){return m_points.length},toString : function(){return m_points.length}}this.add = function(){m_points.push.apply(m_points, arguments);}this.getPoint = function(idx){return m_points[idx];}this.setPoint = function(idx, point){if(m_points[idx] == null){m_points[idx] = point;}else{m_points[idx].x = point.x;m_points[idx].y = point.y;}}}var p = new Polygon({x:1, y:2},{x:2, y:4},{x:2, y:6});alert(p.length);alert(p.firstPoint.x);alert(p.firstPoint.y);p.firstPoint.x = 100; //不小心写了它的值alert(p.getPoint(0).x);  //不会影响到实际的私有成员delete p.firstPoint.x; //恢复alert(p.firstPoint.x);p.setPoint(0, {x:3,y:4}); //通过setter改写了实际的私有成员alert(p.firstPoint.x);  //getter的值发生了改变alert(p.getPoint(0).x);</script>

注意，以上的例子说明了用prototype可以快速创建对象的多个副本，一般情况下，利用prototype来大量的创建复杂对象，要比用其他任何方法来copy对象快得多。注意到，用一个对象为原型，来创建大量的新对象，这正是prototype pattern的本质。
下面是一个例子：

<script>var p1 = new Point(1,2);var points = [];var PointPrototype = function(){};PointPrototype.<strong>prototype</strong> = p1;for(var i = 0; i < 10000; i++){        points[i] = new PointPrototype();        //由于PointPrototype的构造函数是空函数，因此它的构造要比直接构造//p1副本快得多。}</script>

除了上面所说的这些使用技巧之外，prototype因为它独特的特性，还有其它一些用途，被用作最广泛和最广为人知的可能是用它来模拟继承，关于这一点，留待下一节中去讨论。