JavaScript之坑了我--一張圖看盡原型及底層模擬

一張圖就可以看盡js的原型：注意紅色箭頭，就是js的原型鏈！！

    由上面，兩個注意：

    1.       console.log(X.prototype.__proto__);// 一個Object物件：{}

      console.log(X.prototype.__proto__.__proto__);//null

                    __proto__是每個物件都具有的屬性（在W3C標準的瀏覽器中，我們才可以直接訪問）；prototype是每個function物件都具有的屬性；然而，constructor確是原型物件而非普通例項物件具有的屬性，系統自動為原型物件預新增的。

問題1：原型物件是怎麼來的？什麼是原型的繼承??

答：其實，在系統載入定義的（任何函式）function  Person時，會同時執行：Person.prototype = new Object();  Person.prototype.constructor = Person; 兩者的關係的建立是系統底層自動完成的。因此原型物件Person.prototype的所有初始屬性都是從Object中繼承而來，而Person類的例項物件的初始屬性再繼承自原型物件，即也是從Object中繼承而來，此乃原型繼承。是故，可以理解為：Object類是所有類的父類。

        如下一個例子：

        Object.prototype.appleCount = 1000；//所有例項物件都會具有appCount屬性！！！

        console.log(p1.appleCount);//列印：1000
問題2：當例項物件和其原型具有部分同名屬性時，js引擎會如何選擇？

當例項物件和其原型具有部分同名屬性時的一種情況：

var base = {

  name : "base",

  getName　: function(){

    console.log(this.name);//會列印

  }

}

var p1 = {

  name : "p1",

}

p1.__proto__ = base;

p1.getName();//！！！！列印出  p1
這裡有點類似於java中的：覆蓋！！！可以理解為：父類的引用指向子類的物件！！



js物件產生物件的底層模擬：

      //首先我們有一個Person函式：

      function Person(){this.name = "luozhixiao";}

//1)當載入函式Person時,建立Person函式物件，然後執行：

Person.prototype = {};

Person.prototype.constructor = Person;

//2)當我們執行：new Person() 建立類物件時，底層實現模擬如下：

var __Person_Obj__ = {};

__Person_Obj__.__proto__ = Person.prototype;//這裡是重點！

Person.apply(__Person_Obj__);

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29900383/viewspace-1827359/，如需轉載，請註明出處，否則將追究法律責任。