JavaScript 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>

結果：第一次：0 第二次：0

如果給某個對象的類型的原型添加了某個名為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);

alert(p1.x+" "+p1.y);

alert(p1.x+" "+p1.y);

</script>

結果：第一次：0 0 第二次：0 0

上面的例子通過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;

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)}

}

//getter

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

Point.prototype.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)

}

}

//getter

this.getFirstPoint = function() {

function GETTER(){};

GETTER.prototype = m_firstPoint;

return new GETTER();

}

this.getLastPoint = function() {

function GETTER(){};

GETTER.prototype = 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();

//line1.getFirstPoint()返回一個GETTER對象，但是GETTER.prototype = m_firstPoint；m_firstPoint是類型GETTER的原型對象，相當於GETTER類型的基類對象；所以GETTER執行個體對象能夠使用m_firstPoint的所有成員；舉例：1p.x=100;1p實際上是GETTER對象，但是，1p包含m_firstPoint對象的成員。

 

lp.x = 100; //不小心改寫了lp 的值，但是沒有破壞原始的值

alert(line1.getFirstPoint().x);

alert(line1.length); //line1.lenght 不發生改變

</script>

實際上，將一個對象設定為一個類型的原型，相當於通過執行個體化這個類型，為對象建立

唯讀副本，在任何時候對副本進行改變，都不會影響到原始對象，而對原始對象進行改變，

則會影響到副本，除非被改變的屬性已經被副本自己的同名屬性覆蓋。用delete 操作將對

象自己的同名屬性刪除，則可以恢複原型屬性的可見度。下面再舉一個例子：

m_firstPoint的原始版本

x=0;

object

m_firstPoint的副本

x=0;

object

 

當建立類型的執行個體時，將會拷備（prototype=對象）對象到執行個體對象中。  （prototype的預設值為Object對象）當通過prototype動態添加屬性或方法時，是將屬性或方法添加到（

Prototype=對象）對象中。                                                                                                                                          

 

<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 與對象執行個體之間的關係：

尋找優先順序：

1.this執行個體屬性
2.prototype屬性
3.prototype域所指向對象的屬性
//TODO:

4、prototype 的價值與局限性

從上面的分析我們理解了prototype，通過它能夠以一個對象為原型，安全地建立大量

的執行個體，這就是prototype 的真正含義，也是它的價值所在。後面我們會看到，利用prototype

的這個特性，可以用來類比對象的繼承，但是要知道，prototype 用來類比繼承儘管也是它

的一個重要價值，但是絕對不是它的核心，換句話說，JavaScript 之所以支援prototype，

絕對不是僅僅用來實現它的對象繼承，即使沒有了prototype 繼承，JavaScript的prototype

機制依然是非常有用的。

由於prototype 僅僅是以對象為原型給類型構建副本，因此它也具有很大的局限性。首先，

它在類型的prototype 域上並不是表現為一種值拷貝，而是一種引用拷貝，這帶來了“副作

用”。改變某個原型上參考型別的屬性的屬性值（又是一個相當拗口的解釋:P），將會徹底影 (那麼以該類型建立的所有的執行個體中，都是引用同一個prototype對象，在任意一個執行個體中對prototype進行改變，都將影響所有的執行個體，在這裡要注意的是上文所說的副本概念。以例子解釋：var obj1 = new ObjectX(); obj2.prototype = obj1; 根據副本概念來講，實質上是建立obj1的一個獨立副本賦值給obj2的prototype)  ——解釋了下面的例子

響到這個類型建立的每一個執行個體。有的時候這正是我們需要的（比如某一類所有對象的改變

預設值），但有的時候這也是我們所不希望的（比如在類繼承的時候），下面給出了一個例子：

<script>

function ClassA() {

this.a=[];

}

function ClassB() {

this.b=function(){};

}

var c = new ClassA();

ClassB.prototype= c;

objB1=new ClassB();

var objB2=new ClassB();

objB1.a.push(1,2,3);

alert(objB2.a);

//所有b 的執行個體中的a 成員全都變了！！這並不是這個例子所希望看到的。

</script>__

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/liaoxiaoli/archive/2011/01/11/6129682.aspx