「每日一題」談談你對原型、原型鏈、 Function、Object 的理解？

問題

//代碼1nfunction People(){}nvar p = new People()np.__proto__ === People.prototype nPeople.__proto__ === Function.prototypenPeople.prototype.__proto__ === Object.prototypenn//代碼2nFunction.prototype === Function.__proto__ nFunction.prototype === Object.__proto__ nFunction.prototype.__proto__ === Object.prototype nFunction instanceof Objectnn//代碼3nObject instanceof FunctionnFunction instanceof ObjectnFunction instanceof FunctionnObject instanceof Objectn

• 問題1：畫出代碼1的原型圖？

• 問題2：從代碼2你能得出什麼結論？試畫出原型圖？

• 問題3：解釋代碼3的原因？

-------------------------------------------------------------------------

解答：

在解答上面的問題之前，先記住下面幾句話，這幾句話能解釋一切關於原型方面的問題：

1. 當 new 一個函數的時候會創建一個對象，『函數.prototype』 等於 『被創建對象.__proto__』
2. 一切函數都是由 Function 這個函數創建的，所以『Function.prototype === 被創建的函數.__proto__』
3. 一切函數的原型對象都是由 Object 這個函數創建的，所以『Object.prototype === 一切函數.prototype.__proto__』

下面是代碼1的原型圖：

• （1）People函數創建了對象 p，所以People.prototype === p.__proto__；

• （2）Object函數創建了People.prototype對象，所以Object.prototype === People.prototype.__proto__；

• （3）People 作為對象的角色被函數Function創建，所以 Function.prototype === People.__proto__

下面是代碼2的原型圖：

• （1）任何函數都是 Function 創建，所以Function 創建了 Function，所以 Function.prototype === Function.__proto__；

• （2）Object 也是函數。所以Function創建了Object，所以 Function.prototype === Object.__proto__ ；
• （3）Function.prototype 是普通對象，普通對象是由Object創建的，所以 Function.prototype.__proto__ === Object.prototype

關於代碼3：

instanceof 的作用是判斷一個對象是不是一個函數的實例。比如 obj instanceof fn， 實際上是判斷fn的prototype是不是在obj的原型鏈上。比如: obj.__proto__ === fn.prototype， obj.__proto__.__proto__ === fn.prototype，obj.__proto__..._proto__ === fn.prototype，只要一個成立即可。

所以（根據圖2來找）

• 對於 Function instanceof Function，因為 Function.__proto__ === Function.prototype，所以為true。
• 對於 Object instanceof Object， 因為 Object.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype ， 所以為true
• 對於 Function instanceof Object, 因為 Function.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype， 所以為 true
• 對於 Object instanceof Function， 因為 Object.__proto__ === Function.prototype，所以為 true

至此，問題全被完美解決。

歡迎加入我們的前端組織交流討論，每日會有各種新料供上，QQ 群：152052597，加群密碼：js funs