我所知的javascript之prototype

一：prototype大概概念和用途“prototype”字面翻譯是“原型”，是javascript實現繼承的主要手段。粗略來說就是：prototype是javascript中的函數(function)的一個保留屬性，並且它的值是一個對象（我們可以稱這個對象為"prototype對象"），通過以此函數作為建構函式構造出來的對象都自動的擁有建構函式的prototype對象的成員屬性和方法。其中的要點是：1.prototype是函數(function)的一個必備屬性(書面一點的說法是"保留屬性")(只要是function,就一定有一個prototype屬性)2.prototype的值是一個對象3.可以任意修改函數的prototype屬性的值。4.一個對象會自動擁有這個對象的建構函式的prototype的成員屬性和方法例子代碼：//定義一個函數(建構函式),並定義一些屬性和方法用來給另外一個建構函式構造出來的對象繼承
var function1=function(){
    this.name="function1";
    this.saySomething=function(){alert("This's a method of "+this.name);}//定義一個方法
}

//定義另外一個建構函式
var function2=function(){
    
}

function2.prototype=new function1();//將建構函式function2的prototype屬性設定為一個由function1構造出來的對象，以便使由function2構造出來的對象(並且原本是沒有任何屬性和方法的對象)擁有function1的屬性和方法
var obj1=new function1();
obj1.saySomething();//obj1本來什麼成員也沒有，多得prototype機制，是它坐享其成地擁有了function1對象的屬性和方法。當然，上述例子離真正實際上使用的“繼承”還相差甚遠，但也體現出繼承的意義：一個對象擁有了另一個對象的屬性和方法。（如兒子擁有了老爸的血型和脾氣，人類繼承了動物的本能如進食和打鬥等等）

 

二：prototype的背後發生了什嗎？以上部分大概闡述了prototype的概念和作用，但單憑這些還不夠對prototype加深認識。現在來看看prototype背後是怎樣工作的：先來看看用new形式建立對象的過程：var obj=new func();//以func()作為建構函式建立一個對象obj這個過程是這樣的：javascript引擎首先遇到了關鍵字new後，馬上開闢了一塊記憶體，建立了一個Null 物件(並且將this指向這個對象)，接著執行建構函式func()對這個Null 物件進行構造(建構函式裡面有什麼屬性和方法都一一給這個空白對象裝配上去，這也就是為什麼建構函式叫“建構函式”的原因)其實，new和執行建構函式之間還有一件事引擎沒有顯式地告訴我們，而是偷偷地做了，這就是給這個Null 物件賦予prototype對象。這裡不得不提到一個跟prototype一樣同樣是系統保留而且同樣重要的東西：__proto____proto__是一個對象自動擁有的內建屬性（請注意：prototype是函數的內建屬性，__proto__是對象的內建屬性，但它們最終都指向同一個對象，就是那個用來被繼承的對象），用chrome和FF都可以訪問到一個對象的__proto__屬性，IE就不可以。正是一個對象的__proto__指向著這個對象的建構函式的prototype對象，才使這個對象認識了它的建構函式的prototype對象，並擁有了這個prototype對象的屬性和方法。所以var obj=new func()這個過程更具體是這樣的：1.javascript解析引擎遇到new後，開闢一片記憶體並建立了一個Null 物件，並且將“this”指向這個Null 物件2.javascript解析引擎將這個Null 物件的__proto__指向後面緊跟著的建構函式預設的prototype對象（一指向到prototype對象後，解析引擎就知道了“噢，這個對象要擁有這個prototype對象的屬性和方法了”）3.javascript解析引擎執行建構函式體內的代碼，也就正式開始對這個Null 物件進行構造（或者說裝配）的過程了(this.name="xxx",this.sayHello=function(){...}等等)4.對象被構造裝配好，並賦值到等號左邊的變數。三：後記我在嘗試比較js中使用call與prototype實現繼承的優缺點的過程中曾遇到過一個問題，並在csdn論壇上求助過，有興趣的可以點擊看一下http://topic.csdn.net/u/20111119/12/c40f4674-6142-4c4a-a532-9580f2baed8d.html，這是這個問題使我加速了對prototype的瞭解。在此多謝一下為我解答的liangws。正如本文題目所說的，這些都是“我所知的javascript”，由於本人水平有限，本文描述肯定有不正確的地方，所以僅供參考，如發現有錯誤的地方歡迎拍磚。