1. 程式人生 > >JavaScript物件系統深入剖析3-建立物件Object.Create

JavaScript物件系統深入剖析3-建立物件Object.Create

3.建立物件Object.Create 

@吳穹Adam

看這兩天同學們的反饋還是覺得比較難懂,因此,決定再舉一個例子幫助大家理解吧,後面有關Scope和閉包Closure的精彩內容就只好晚一點寫了!

其實,這個系列不是寫給初學者的,而是寫給那些中級JS程式設計師的,對JS有一定的認識,希望這個系列能夠幫助他們透過現象看到本質。同時,這裡面的內容是高度濃縮的,向1,2節基本上對應了JavaScript: The Good Parts兩章的內容,因此,建議感興趣的同學,最好根據上面的例子程式,配合Debugger,仔細體會可能才能理解,指望光看這個部落格系列就完全搞懂JS的物件系統是不太切合實際的。

另外,如果你只是簡單寫寫網頁,的確可能不需要把JS搞懂這麼清楚,但是如果你真正重視JS,打算應用例如Node.js,backbone.js這樣的JS框架的話,那麼,我認為還是需要真正把JS搞明白的。

同時,在閱讀下面內容之前,請先閱讀1,2:

好,切入正題吧,在JavaScript: The Good Parts當中,給出了一個建立物件的常用方式:

Object.create = function (o) {

         var F = function () {};

         F.prototype = o;

         return new F();

     };

var b=Object.create(a);

結合1,2節的內容,我們來理解一下上述這段程式碼:

首先,在執行var b=Object.create(a);之前,已經有了a物件,如下圖:

 

在執行了var F = function () {};之後,F函式物件被創建出來,他的property屬性也被賦值指向一個新創建出來的物件,詳細規則在第二節描述過:

當用var ff = function(){}定義一個函式時,JS會生成一個函式物件F,函式物件F的__proto__指標指向Function.prototype(在下圖中省略了), 同時F還會有一個property屬性,property屬性的值指向一個新建立的物件P,這個物件P只有一個屬性是建構函式constructor(),建構函式constructor()的值就是函式物件F,而物件P的__proto__指標則指向Object.Prototype,

 

執行了F.prototype = o; 之後, F的prototype屬性指向了物件A,如下圖所示:

 

執行new F();之後,根據第2節中描述的規則,執行之後的物件關係如下:

當用new啟用一個函式時,一個新物件會被創建出來,其內容是執行函式的返回結果,而這個物件的__proto__連結指向函式的prototype屬性所引用的物件

 

函式Object.create返回之後,F和p都不存在了,因此,最後的物件關係如下:

 

總結一下,我們可以看到,物件的__proto__連結是不能直接修改的,而函式物件的prototype屬性是可以修改的,因此,Object.create實際上是利用了這個特點,結合new來完成了一個拷貝建立的過程,希望這個例子能夠幫助大家更好地理解!!