JS面向物件原理（二）------圖解原型鏈（詳）

引言

上周晚上有個朋友讓我給她講關于原型鏈的知識，我以為這都是小菜一碟，但是一番講解下來才發現原來我熟悉的也不過是原型鏈的一小部分，當往上講到Function和Object以及內置建構式的時候，就有些牽強了，于是打算寫一系列關于原型鏈這部分的內容，那就寫吧，那要從哪里開始寫起呢？說原型鏈，我想到的是為什么會有原型鏈，什么是原型鏈，利用原型鏈我們可以做什么，所以這系列的內容也會按照這個順序來寫，
為什么會有原型鏈：請移步到JS面向物件原理之面向物件編程發展史，
本章則講述什么是原型鏈，

JS物件

為了能夠清楚的解釋這一切，我先從物件講起，
JS中的資料型別分為兩大類，一類是基本型別：String、Number、Boolean、Symbol、null、undefined,另一類是參考型別：Object、Array、Function，JS中有句話叫‘一切皆物件’，你可以把物件理解為像map那樣的資料結構，也可以理解為一張散串列，總之，在物件中資料是以key：value的形式存盤，

物件三要素：唯一標志，狀態，行為
著名的哲學問題 “忒修斯之船”是一種有關身份更替的悖論：如果忒修斯的船上的木頭被逐漸替換，直到所有的木頭都不是原來的木頭，那這艘船還是原來的那艘船嗎，所以物件的唯一標志就起作用了，在JS中物件的唯一標志是記憶體地址，物件要有狀態，狀態是可以被改變的，改變就是行為，這樣物件的三要素就成立了，

函式實際上也是物件，那基本型別也是物件嗎？

從上圖分析：
1.定義String資料有兩種方式，使用JS內置的建構式String或者使用字面量來定義，
2.如果使用建構式來定義，則會生成一個String物件，typeof a===object，可以呼叫物件中存盤的length方法，也可以呼叫其__proto__中存盤的原型物件中的方法如toUpperCase()，
3.如果使用字面量定義，則生成一個原始值(PrimitiveValue),typeof b===string，原始值中并沒有定義任何的方法，但是依舊可以使用length方法和toUpperCase方法,為什么呢？

這是因為雖然基本資料型別不是物件，在存盤形式上它被存放在堆疊中，但是在一定條件下（new關鍵字或者呼叫基本資料型別方法時）JavaScript 引擎會自動將原始型別的值轉為包裝物件實體（undefine和null除外），并在使用后立刻銷毀實體，這就是原始型別的‘包裝物件’，在上節中‘new語法糖為我們做了什么’部分有提到過關于包裝物件的知識，

JS原型物件

我們現在知道了什么是物件了，那什么是原型物件呢？JS面向物件原理之面向物件編程發展史里我總結了一句話：原型物件是被設計來存放類的公有屬性和方法的，自定義建構式的原型除了自帶一個不可列舉的constructor屬性指向函式本身外，和其他空物件并無不同，而所有內置建構式原型上還另外定義了實體方法，如Array.prototype.sort()，你可以把原型物件理解為一個共享倉庫，當然你如果覺得這句話還是很抽象的話，我再給大家舉個栗子吧，
在自然界中，萬物皆物件，那么我們用‘物件’來表示萬物，萬物又分為動物和植物，這叫分類，動物又分為人類，魚類…這就是更加詳細的類的劃分了，在人類中有2個人，一個叫CSS，一個叫CHH，她們是兩個長得一模一樣的人，俗稱雙胞胎，有一天CSS走在路上不小心摔了一個大跟斗，腳摔斷了，可是CHH卻安然無恙，因為雖然她們兩個長得一模一樣，但是卻是兩個獨立的物件，互相不受影響，那這跟原型物件有什么關系呢？現在假設有兩條魚，一條叫CSS，一條叫CHH，這兩條魚也是雙胞胎，那我怎么區分這個CSS是魚，還是人呢？其實我們只要分別把魚類和人類的公共特征提取出來，放到一個物件中去描述（事實上的確就是這么做的），這樣我們只要看這個CSS符合的是哪一類的特征就知道她是魚還是人了，那么這個用于存放公共特征的物件就叫原型物件，

也就是說在JS中有一些物件叫原型

typeof Object.prototype==='object'//true

Object的原型是Object.prototype，存放Object’類’的公共屬性和方法，
Function的原型是Function.prototype，存放Function’類’的公共屬性和方法
Person的原型是Person.prototype，存放Person’類’的公共屬性和方法
…

JS建構式之父Function與物件之父Object的糾葛

我們知道JavaScript是一種基于物件的語言，在JavaScript中，默認情況下，所有參考型別都繼承自Object（通過原型鏈實作），任何函式的默認原型都是一個Object的實體，而所有建構式的爸爸都是Function，包括在JS中九個原生（或內置）物件建構式，都是Function的實體，

看到紅色箭頭指向的兩行了嗎，Function是function型別好說，為什么Object也是function型別呢？其實這也不難理解，畢竟Object實際上也是個建構式f Object(){[navtie code]}，實際上，Object被設定為函式是因為Object需要創建更多實體：

那有人又會問了：
你看這個Function instanceof Object，Object instanceof Function，字面意思看來是不是說這兩個互為彼此的實體啊？
我先回答一下這個問題：Object的確是Function的實體，實際上它是個建構式嘛，但是Function并不是Object的實體，只不過Function的原型是Object實體，Function作為一個建構式之父，它自己實體化了自己，Object作為一個物件之父，它構造了所有的物件，包括原型，而instanceof的判斷依據是：只要實體的原型鏈中包含了某建構式的原型，則instanceof對該建構式回傳true，

LOOK THIS PICTURE：

a是我們創建的類，叫a類，實際上它是一個建構式，所以typeof a===‘function’，b是a類的實體，實際上它是一個物件，再結合new的機制來看，可以以為，Function是賦予JS運行能力的工廠，Object則是為生產線提供了原料（容器），
最后一句話概括，

Object和Function都是JavaScript的基類，JavaScript中所有的建構式都需要Function來實體化，包括Object，JavaScript中所有的建構式的原型都需要Object來實體化，

JS原型鏈

原型講的差不多了，那原型鏈是什么，ECMA-262把原型鏈定義為ECMAScript的主要繼承方式，其基本思想就是通過原型繼承多個參考型別的屬性和方法，再通俗一點來說，原型鏈就是把原型鏈起來的鏈子，

原型鏈三大規則
1.建構式的prototype指向其原型物件
2.原型物件的constructor指向建構式本身
3.實體物件的__proto__指向建構式的原型物件
也就是說建構式和實體之間并沒有直接的聯系，和實體之間有直接聯系的是建構式的實體物件，

根據原型鏈的三大規則，我們得到了原型鏈的基本結構圖，

那如果原型是另一個建構式的實體呢？那就意味著這個原型本身內部有個__proto__指向另一個原型，相應地，另一個原型也有一個constructor指向另一個建構式，這樣就在實體和原型之間構造了一條原型鏈，這就是原型鏈的基本思想，查找實體屬性時按照綠色的線路進行查找，

原型搜索機制：原型鏈的存在拓展了原型的搜索機制，當訪問實體物件的某個屬性的時候，如果存在該屬性，就回傳該屬性的值，否則，將自動查找該物件的__proto__ 指向的原型物件中是否存在該屬性，如果存在，就回傳該屬性的值，否則，繼續在原型物件的__proto__指向的原型物件中尋找，這樣一直查下去，直到找到Object的原型物件，如果還沒找到此屬性，則回傳undefined，

其實原型鏈到這里也就應該差不多了，再加上JS的兩個頂層建構式也就該完整了，結合上段對Function和Object的關系闡述以及原型鏈的三大規則，得到了Function和Object的原型鏈圖解：

1.Function實體化了自己，所以Function是自己的實體，該實體的__proto__指向自己的原型物件，
2.Object實體化了自己的原型物件，所以Object.prototype是Object的實體，但是Object.prototype并沒有指向自己是因為如果指向自己原型鏈將沒有終點，原型鏈的搜索將會不斷在Object.prototype中轉圈圈，所以JS設定Object的原型物件的__proto__為null標志原型鏈的終點，
3.Function的原型物件是Object的實體，所以Function.prototype.__proto指向Object.prototype，
最后上張全家福—完整的原型鏈圖：

• 下章講解利用原型鏈可以做什么以及怎么做，