JavaScript中prototype屬性詳解（轉載）

前言:

這是一篇轉載的轉載，本想只收藏個地址，發現這裏的分享不能使用，所以就再轉載一次，僅留給自己做學習筆記使用。

我轉載出處：http://hi.baidu.com/kingcham/blog/item/58ca8ffab6a15b6e024f567a.html

JavaScript 中對象的prototype屬性，可以返回對象類型原型的引用。這是一個相當拗口的解釋，要理解它，先要正確理解對象類型(Type)以及原型 (prototype)的概念。
1 什麼是prototype
       JavaScript中對象的prototype屬性，可以返回對象類型原型的引用。這是一個相當拗口的解釋，要理解它，先要正確理解對象類型 (Type)以及原型(prototype)的概念。
        前面我們說，對象的類（Class）和對象實例（Instance）之間是一種“創建”關係，因此我們把“類”看作是對象特徵的模型化，而對象看作是類特徵的具體化，或者說，類(Class)是對象的一個類型(Type)。例如，在前面的例子中，p1和p2的類型都是Point，在JavaScript 中，通過instanceof運算符可以驗證這一點：
     p1 instanceof Point
        p2 instanceof Point
        但是，Point不是p1和p2的唯一類型，因爲p1和p2都是對象，所以Obejct也是它們的類型，因爲Object是比Point更加泛化的類，所以我們說，Obejct和Point之間有一種衍生關係，在後面我們會知道，這種關係被叫做“繼承”，它也是對象之間泛化關係的一個特例，是面向對象中不可缺少的一種基本關係。
        在面向對象領域裏，實例與類型不是唯一的一對可描述的抽象關係，在JavaScript中，另外一種重要的抽象關係是類型(Type)與原型 (prototype)。這種關係是一種更高層次的抽象關係，它恰好和類型與實例的抽象關係構成了一個三層的鏈。
        在現實生活中，我們常常說，某個東西是以另一個東西爲原型創作的。這兩個東西可以是同一個類型，也可以是不同類型。習語“依葫蘆畫瓢”，這裏的葫蘆就是原型，而瓢就是類型，用JavaScript的prototype來表示就是“瓢.prototype =某個葫蘆”或者“瓢.prototype= new 葫蘆()”。
        要深入理解原型，可以研究關於它的一種設計模式——prototype pattern，這種模式的核心是用原型實例指定創建對象的種類，並且通過拷貝這些原型創建新的對象。JavaScript的prototype就類似於這種方式。
        關於prototype pattern的詳細內容可以參考《設計模式》（《Design Patterns》）它不是本文討論的範圍。
        注意，同類型與實例的關係不同的是，原型與類型的關係要求一個類型在一個時刻只能有一個原型（而一個實例在一個時刻顯然可以有多個類型）。對於 JavaScript來說，這個限制有兩層含義，第一是每個具體的JavaScript類型有且僅有一個原型（prototype），在默認的情況下，這個原型是一個Object對象（注意不是Object類型！）。第二是，這個對象所屬的類型，必須是滿足原型關係的類型鏈。例如p1所屬的類型是 Point和Object，而一個Object對象是Point的原型。假如有一個對象，它所屬的類型分別爲ClassA、ClassB、ClassC和 Object，那麼必須滿足這四個類構成某種完整的原型鏈。
        有意思的是，JavaScript並沒有規定一個類型的原型的類型（這又是一段非常拗口的話），因此它可以是任何類型，通常是某種對象，這樣，對象-類型 -原形（對象）就可能構成一個環狀結構，或者其它有意思的拓撲結構，這些結構爲JavaScript帶來了五花八門的用法，其中的一些用法不但巧妙而且充滿美感。下面的一節主要介紹prototype的用法。

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.prototype.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.prototype.x = 0;
Point.prototype.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.prototype = 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.prototype.x = 0;
Point.prototype.y = 0;

    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.prototype.x = 0;
Point.prototype.y = 0;

    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.prototype = 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.prototype = p1;
for(var i = 0; i < 10000; i++)
{
points[i] = new PointPrototype();
//由於PointPrototype的構造函數是空函數，因此它的構造要比直接構造//p1副本快得多。
}
</script>

除了上面所說的這些使用技巧之外，prototype因爲它獨特的特性，還有其它一些用途，被用作最廣泛和最廣爲人知的可能是用它來模擬繼承，關於這一點，留待下一節中去討論。
3 prototype的實質
        上面已經說了prototype的作用，現在我們來透過規律揭示prototype的實質。
        我們說，prototype的行爲類似於C++中的靜態域，將一個屬性添加爲prototype的屬性，這個屬性將被該類型創建的所有實例所共享，但是這種共享是隻讀的。在任何一個實例中只能夠用自己的同名屬性覆蓋這個屬性，而不能夠改變它。換句話說，對象在讀取某個屬性時，總是先檢查自身域的屬性表，如果有這個屬性，則會返回這個屬性，否則就去讀取prototype域，返回protoype域上的屬性。另外，JavaScript允許protoype 域引用任何類型的對象，因此，如果對protoype域的讀取依然沒有找到這個屬性，則JavaScript將遞歸地查找prototype域所指向對象的prototype域，直到這個對象的prototype域爲它本身或者出現循環爲止，我們可以用下面的圖來描述prototype與對象實例之間的關系：
        //TODO:
4 prototype的價值與侷限性
        從上面的分析我們理解了prototype，通過它能夠以一個對象爲原型，安全地創建大量的實例，這就是prototype的真正含義，也是它的價值所在。後面我們會看到，利用prototype的這個特性，可以用來模擬對象的繼承，但是要知道，prototype用來模擬繼承儘管也是它的一個重要價值，但是絕對不是它的核心，換句話說，JavaScript之所以支持prototype，絕對不是僅僅用來實現它的對象繼承，即使沒有了 prototype繼承，JavaScript的prototype機制依然是非常有用的。
        由於prototype僅僅是以對象爲原型給類型構建副本，因此它也具有很大的侷限性。首先，它在類型的prototype域上並不是表現爲一種值拷貝，而是一種引用拷貝，這帶來了“副作用”。改變某個原型上引用類型的屬性的屬性值（又是一個相當拗口的解釋:P），將會徹底影響到這個類型創建的每一個實例。有的時候這正是我們需要的（比如某一類所有對象的改變默認值），但有的時候這也是我們所不希望的（比如在類繼承的時候），下面給出了一個例子：
<script>
function ClassA()
{
    this.a=[];
}
function ClassB()
{
    this.b=function(){};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的實例中的a成員全都變了！！這並不是這個例子所希望看到的。
</script>

JavaScript實現：
        在Java語言中對象都繼承自java.lang.Object，而java.lang.Object就提供了Clone的方法，只要實現接口 Cloneable，即表示支持Clone，否則拋出異常。在這點JavaScript是非常接近的，所有的對象都是從Object繼承，不過 Object並不支持Clone的方法，但是我們可以通過自己對於JavaScript通過expanddo的形式實現Clone方法，這樣日後所有的對象創建都實現了Clone方法。
        因爲JavaScript本身沒有提供Clone的方法，同時對於對象的賦值如var a=new Object();var b=a，這樣的代碼a,b是指向同一對象的，要創建一個對象必須通過new這個關鍵字來實現，因此在Clone的實現過程，我內部定義了一個構造子 (constructor)CloneModel，同時指定其父對象爲要進行Clone活動本身的對象，因此使用了this關鍵字，在我們定義的構造子 CloneModel的基礎上我們創建一個一個對象，因爲構造子內部沒有任何代碼，新創建的對象實際上說所有的實現都在父對象中，也就是我們需要進行 Clone的對象。到目前爲止，我們已經創建了一個需要複製的對象，但是所有的值都是指向父對象的。
        在 JavaScript的面向對象方式中，我們曾經討論過，如果沒有覆蓋父對象的值，那麼這個時候是直接指向父對象的，在Prototype Pattern是要求Clone之後的對象的內部值是不應該相關的，而只要賦值一次，objClone的值都會在自己的內存空間裏頭，而不是還指向父對象。基於如此的考慮，objClone[v]=objClone[v];語句就是實現將父對象的值通過覆蓋的方式拷貝到自己的內存來。

JavaScript中prototype屬性詳解（轉載）

bridge模式-結構型模式

JavaScript中prototype屬性詳解（轉載）

facade模式--結構型模式

【轉】Web Service實踐之——開始XFire

abstract factory-對象創建型模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結