轉載的這兩篇博文可以加深對Prototype的理解
介紹一
用過JavaScript的同學們肯定都對prototype如雷貫耳，但是這究竟是個什麼東西卻讓初學者莫衷一是，只知道函數都會有一個prototype屬性，可以爲其添加函數供實例訪問，其它的就不清楚了，最近看了一些 JavaScript高級程序設計，終於揭開了其神祕面紗。
每個函數都有一個prototype屬性，這個屬性是指向一個對象的引用，這個對象稱爲原型對象，原型對象包含函數實例共享的方法和屬性，也就是說將函數用作構造函數調用（使用new操作符調用）的時候，新創建的對象會從原型對象上繼承屬性和方法。
私有變量、函數
在具體說prototype前說幾個相關的東東，可以更好的理解prototype的設計意圖。之前寫的一篇JavaScript 命名空間文章中提到過JavaScript的函數作用域，在函數內定義的變量和函數如果不對外提供接口，那麼外部將無法訪問到，也就是變爲私有變量和私有函數。
function Obj(){
var a=0; //私有變量
var fn=function(){ //私有函數
}
}
這樣在函數對象Obj外部無法訪問變量a和函數fn，它們就變成私有的，只能在Obj內部使用，即使是函數Obj的實例仍然無法訪問這些變量和函數
var o=new Obj();
console.log(o.a); //undefined
console.log(o.fn); //undefined
靜態變量、函數
當定義一個函數後通過 “.”爲其添加的屬性和函數，通過對象本身仍然可以訪問得到，但是其實例卻訪問不到，這樣的變量和函數分別被稱爲靜態變量和靜態函數，用過Java、C#的同學很好理解靜態的含義。
function Obj(){
}
Obj.a=0; //靜態變量
Obj.fn=function(){ //靜態函數
}
console.log(Obj.a); //0
console.log(typeof Obj.fn); //function
var o=new Obj();
console.log(o.a); //undefined
console.log(typeof o.fn); //undefined
實例變量、函數
在面向對象編程中除了一些庫函數我們還是希望在對象定義的時候同時定義一些屬性和方法，實例化後可以訪問，JavaScript也能做到這樣
function Obj(){
this.a=[]; //實例變量
this.fn=function(){ //實例方法
}
}
console.log(typeof Obj.a); //undefined
console.log(typeof Obj.fn); //undefined
var o=new Obj();
console.log(typeof o.a); //object
console.log(typeof o.fn); //function
這樣可以達到上述目的，然而
function Obj(){
this.a=[]; //實例變量
this.fn=function(){ //實例方法
}
}
var o1=new Obj();
o1.a.push(1);
o1.fn={};
console.log(o1.a); //[1]
console.log(typeof o1.fn); //object
var o2=new Obj();
console.log(o2.a); //[]
console.log(typeof o2.fn); //function
上面的代碼運行結果完全符合預期，但同時也說明一個問題，在o1中修改了a和fn，而在o2中沒有改變，由於數組和函數都是對象，是引用類型，這就說明o1中的屬性和方法與o2中的屬性與方法雖然同名但卻不是一個引用，而是對Obj對象定義的屬性和方法的一個複製。
這個對屬性來說沒有什麼問題，但是對於方法來說問題就很大了，因爲方法都是在做完全一樣的功能，但是卻又兩份複製，如果一個函數對象有上千和實例方法，那麼它的每個實例都要保持一份上千個方法的複製，這顯然是不科學的，這可腫麼辦呢，prototype應運而生。
prototype
無論什麼時候，只要創建了一個新函數，就會根據一組特定的規則爲該函數創建一個prototype屬性，默認情況下prototype屬性會默認獲得一個constructor(構造函數)屬性，這個屬性是一個指向prototype屬性所在函數的指針，有些繞了啊，寫代碼、上圖！
function Person(){
}
根據上圖可以看出Person對象會自動獲得prototyp屬性，而prototype也是一個對象，會自動獲得一個constructor屬性，該屬性正是指向Person對象。
當調用構造函數創建一個實例的時候，實例內部將包含一個內部指針（很多瀏覽器這個指針名字爲__proto__）指向構造函數的prototype，這個連接存在於實例和構造函數的prototype之間，而不是實例與構造函數之間。
function Person(name){
this.name=name;
}
Person.prototype.printName=function(){
alert(this.name);
}
var person1=new Person('Byron');
var person2=new Person('Frank');
Person的實例person1中包含了name屬性，同時自動生成一個__proto__屬性，該屬性指向Person的prototype，可以訪問到prototype內定義的printName方法，大概就是這個樣子的
寫段程序測試一下看看prototype內屬性、方法是能夠共享
function Person(name){
this.name=name;
}
Person.prototype.share=[];
Person.prototype.printName=function(){
alert(this.name);
}
var person1=new Person('Byron');
var person2=new Person('Frank');
person1.share.push(1);
person2.share.push(2);
console.log(person2.share); //[1,2]
果不其然！實際上當代碼讀取某個對象的某個屬性的時候，都會執行一遍搜索，目標是具有給定名字的屬性，搜索首先從對象實例開始，如果在實例中找到該屬性則返回，如果沒有則查找prototype，如果還是沒有找到則繼續遞歸prototype的prototype對象，直到找到爲止，如果遞歸到object仍然沒有則返回錯誤。同樣道理如果在實例中定義如prototype同名的屬性或函數，則會覆蓋prototype的屬性或函數。
function Person(name){
this.name=name;
}
Person.prototype.share=[];
var person=new Person('Byron');
person.share=0;
console.log(person.share); //0而不是prototype中的[]
構造簡單對象
當然prototype不是專門爲解決上面問題而定義的，但是卻解決了上面問題。瞭解了這些知識就可以構建一個科學些的、複用率高的對象，如果希望實例對象的屬性或函數則定義到prototype中，如果希望每個實例單獨擁有的屬性或方法則定義到this中，可以通過構造函數傳遞實例化參數。
function Person(name){
this.name=name;
}
Person.prototype.share=[];
Person.prototype.printName=function(){
alert(this.name);
}
介紹二
一、基本使用方法
prototype屬性可算是JavaScript與其他面嚮對象語言的一大不同之處。
簡而言之，prototype就是“一個給類的對象添加方法的方法”，使用prototype屬性，可以給類動態地添加方法，以便在JavaScript中實現“繼承”的效果。
具體來說，prototype 是在 IE 4 及其以後版本引入的一個針對於某一類的對象的方法，當你用prototype編寫一個類後，如果new一個新的對象，瀏覽器會自動把prototype中的內容替你附加在對象上。這樣，通過利用prototype就可以在JavaScript中實現成員函數的定義，甚至是“繼承”的效果。
一個簡單的示例如下：
- Number.prototype.add = function(num){return(this+num);}
這是對已有類添加方法。這樣寫，可以增強已有類的功能，例如可以給Array類增加push方法如下：
- Array.prototype.push = function(new_element){
- this[this.length]=new_element;
- return this.length;
- }
對於自定義的類（或者稱函數對象），也可以這樣寫：
- function MyApplication() {
- this.counter = 0;
- this.map = new GMap2(document.getElementById("map_canvas"));
- this.map.setCenter(new GLatLng(39.917,116.397), 14);
- GEvent.bind(this.map, "click", this, this.onMapClick);
- }
- MyApplication.prototype.onMapClick = function() {
- this.counter++;
- alert("這是您第 " + this.counter + " 次點擊地圖");
- }
這裏定義了創建地圖的類，並且爲其定義了“單擊”事件的響應函數。
二、prototype的動態特性及弊端
需要注意的是，prototype爲我們提供了方便，使我們可以在類定義完成之後，仍可以隨時爲其添加方法、屬性，隨時添加隨時使用——也就是prototype的定義具有動態性。但是越靈活的語言出現錯誤的可能性越大。這就需要我們在使用時，必須養成一些良好的習慣。
“首先，如果可以動態添加屬性和方法，那麼很容易讓人想到，當我調用時，我想要調用的屬性或者方法存在不？這是一個很嚴肅的問題，如果當我們調用時根本沒有該屬性或者方法，將可能導致我們的腳本down掉。” 對於這個問題，在使用時我們以後可以按照下面的寫法書寫：
- function MyObject(name, size)
- {
- this.name = name;
- this.size = size;
- }
- MyObject.prototype.height = "2.26 meters";
- MyObject.prototype.tellHeight = function()
- {
- return "height of "+this.name+" is "+this.height;
- }
- ///////使用
- var myobj1 = new MyObject("haha", 3);
- if (myobj1.tellHeight)
- {
- domDiv.innerHTML += myobj1.tellHeight()+";
- }
屬性和方法在不在的問題簡單，可是屬性和方法變不變化的問題可就嚴重了。在不在我們可以檢測，變不變呢？比如，請看下面的代碼：
- function MyObject(name, size)
- {
- this.name = name;
- this.size = size;
- }
- MyObject.prototype.color = "red";
- MyObject.prototype.tellColor = function()
- {
- return "color of "+this.name+" is "+this.color;
- }
- var myobj1 = new MyObject("tiddles", "7.5 meters");
- domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
- MyObject.prototype.color = "green";
- domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
修改的是類MyObject的color屬性。但是你驚奇的會看到你之前實例化的對象myobj1的屬性值竟然也變化了：
color of tiddles is red
color of tiddles is green
上面是屬性，還有方法，方法也是可以變的！
- function MyObject(name, size)
- {
- this.name = name;
- this.size = size;
- }
- MyObject.prototype.color = "red";
- MyObject.prototype.tellColor = function()
- {
- return "color of "+this.name+" is "+this.color;
- }
- var myobj1 = new MyObject("tiddles", "7.5 meters");
- domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
- MyObject.prototype.color = "green";
- MyObject.prototype.tellColor = function()
- {
- return "your color of "+this.name+" is "+this.color;
- }
- domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
這段代碼的結果是：
color of tiddles is red
your color of tiddles is green
Java和C#這些比較嚴格的語言，雖然降低了靈活性，但也減少了犯錯誤的可能。這樣，即使一個新手，他寫出的代碼也不會與高手差太多。但是，像Javascript這樣的腳本語言，由於太靈活，所以，一定要有好的代碼編寫習慣，否則出現了上面的問題，調試時可就難咯！
三、prototype的實現機制
可以說，prototype實際上是“引用”，而非“賦值”。也就是給一個類添加一個屬性或者方法，是給它添加了個引用，而非賦值一份給它。看看下面的這個例子：
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <title>Test "prototype"</title>
- <mce:script type="text/javascript"><!--
- function ClassA()
- {
- alert("a");
- this.a=function(){alert();};
- }
- function ClassB()
- {
- alert("b");
- this.b=function(){alert();};
- }
- ClassB.prototype.a=new ClassA(); //會導致彈出 a 對話框
- ClassB.prototype.xx = "xx";
- function initialize()
- {
- var objB1=new ClassB(); //彈出 b 對話框
- var objB2=new ClassB(); //彈出 b 對話框
- alert(objB1.a==objB2.a); //true
- alert(objB1.b==objB2.b); //false
- alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: xx, objB2.xx: xx
- ClassB.prototype.xx = "yy";
- alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: yy
- objB2.xx = "zz";
- alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: zz
- }
- // --></mce:script>
- </head>
- <body>
- <mce:script type="text/javascript"><!--
- initialize();
- // --></mce:script>
- </body>
- </html>
其執行結果是依次彈出以下窗口：
a
b
b
true
false
objB1.xx: xx, objB2.xx: xx
objB1.xx: yy, objB2.xx: yy
objB1.xx: yy, objB2.xx: zz
相關的解釋已經註釋在代碼中。從上面的代碼可以發現，prototype只是給ClassB添加了ClassA實例的引用。因此，兩個ClassB的實例中的a實例相等。
同時，ClassA的構造函數只在添加引用時被執行一次，此後ClassB的對象實例化時，只執行ClassB的構造函數。