**目錄** - 一切皆是物件嗎？ - 物件 - 原型與原型鏈 - 建構函式 - 參考
**1.一切皆是物件嗎？** 首先，“在 JavaScript 中，一切皆是物件”這種表述是不完全正確的。 JavaScript 的資料型別分為兩類：原始值型別和物件（Object型別）。 原始值型別（ES5）： - undefined - null - typeof null 的值為"object"，是因為 ES5 規範規定：對於 null 值的 typeof 字串值返回"object" - true/false - 布林值 - number - string ```js var a = undefined var b = null var c = true var d = 1 var e = "abc" ``` 這些值是在底層上直接實現的，它們不是object，所以沒有原型（_\_proto__），沒有建構函式（constructor）。 但我們再實踐過程中，會發現雖然字串，布林值和數字是原始值型別，但卻表現得有點像物件。 以字串為例：  在上圖中，可以看到定義了一個值為"abc"的字串變數 e，訪問其 _\_proto__ 和 constructor 屬性，發現其居然有值？不是說原始值型別沒有原型和建構函式，這是怎麼回事呢？ 原來原始值型別（布林值、數字、字串）有其對應的包裝器物件：Boolean（布林物件）、Number（數字物件）、String（字串物件），在這些原始值型別上嘗試呼叫屬性或方法（比如 constructor 等）時，JS會自動進行 Auto-Boxing（臨時包裝）的過程，首先將其轉換為臨時包裝器物件，再訪問其上的屬性或方法，而不會影響原始值型別的屬性。 這也能解釋為什麼我們直接對原始值型別變數（布林值、數字、字串）添加了一些屬性，再次訪問依舊為 undefined，因為我們訪問屬性操作的是臨時包裝器物件，不會影響基本原始值型別本身。如下圖：  而原始值型別（null 與 undefined）沒有對應的包裝器物件，所以在其上嘗試訪問任何屬性或方法都會報錯。如下圖： 
**2.物件** 在JS中，Object 是一個屬性的集合，並且擁有一個單獨的原型物件 [prototype object] （其可以是一個 object 或 null 值）。 在瀏覽器或 Node.js 中，可以通過 _\_proto__ 屬性訪問這個原型物件， _\_proto__ 被稱為該物件的原型，但為了和函式的原型屬性（prototype）區分，一般稱其為隱式原型。 ```js var position = { x: 10, y: 20, z: 30, } ``` 上面的程式碼中，物件與隱式原型的關係如下圖： 
（1）原型與原型鏈 在JS中，物件的繼承關係是通過隱式原型（_\_proto__）來實現的。物件的隱式原型在物件建立時由物件的建構函式自動關聯，也可以通過修改隱式原型，更改物件的繼承關係。 > 由 Object 建構函式建立的物件，其隱式原型指向 Object.prototype。而 Object.prototype 物件的隱式原型的值預設為 nulll。 程式碼示例： ```js // x, y, z 的隱式原型 __proto__ 預設都指向 Object.prototype var x = { a: 10, } var y = { a: 20, b: 30, } var z = { a: 40, b: 50, c: 60, } // 設定 x 的隱式原型為 y // 設定 y 的隱式原型為 z x.__proto__ = y y.__proto__ = z console.log(x.a) // 10 - 來自 x 自身的屬性 console.log(x.b) // 30 - 來自 y 的屬性 console.log(x.c) // 60 - 來自 z 的屬性 // 修改 y 的屬性 b 的值 y.b = 70 console.log(x.b) // 70 - 來自 y 的屬性 // 移除 z 的屬性 c delete z.c console.log(x.c) // undefined - 沿著隱式原型一級一級往上找，沒有找到該屬性 ``` 從上述程式碼，我們可以看到，當訪問一個物件的屬性時，會優先在這個物件的屬性中查詢是否存在所要訪問的屬性，若存在，則獲取成功，停止查詢；若沒有找到該屬性，則會繼續去查詢該物件的隱式原型中是否存在，若存在，則獲取成功，停止查詢；若還是沒有查詢到，將繼續再往上一級的隱式原型中查詢，直到找到則返回找到的屬性值 或 直到遇到隱式原型值為 null 則返回 undefined。 這種由原型相互關聯（指向）的關係就形成了所謂的原型鏈，而物件的屬性或方法的查詢就是沿著原型鏈順序進行查詢的。 上述程式碼示例中的原型鏈關係如下圖： 
（2）建構函式 首先要明白，函式也是一個特殊的物件，除了和其他物件一樣有 _\_proto__ 屬性外，還有自己特有的屬性——顯示原型（prototype），這個屬性指向一個物件，其用途就是包含所有例項共享的屬性和方法。顯示原型物件也有一個 constructor 屬性，這個屬性指向原建構函式。 而所謂建構函式，就是提供一個生成物件的模板，並描述物件的基本結構的函式。一個建構函式，可以生成多個物件，每個物件都有相同的結構。而JS中所有函式（除了箭頭函式）都可以當做建構函式。 一個物件由建構函式建立時，其隱式原型（_\_proto__）指向構造該物件的建構函式（constructor）的顯示原型（prototype），這保證了例項能夠訪問在建構函式原型中定義的屬性和方法。 程式碼示例： ```js // 建構函式 C function C(x) { this.x = x } // 繼承屬性 y C.prototype.y = 30 // new 兩個物件例項a、b var a = new C(10) var b = new C(20) console.log(a.x) // 10 console.log(a.y) // 30 console.log(b.x) // 20 console.log(b.y) // 30 // 物件例項 a、b 的隱式原型（__proto__）指向構造該物件的建構函式 C 的顯示原型（prototype） console.log(a.__proto__ === C.prototype) // true console.log(b.__proto__ === C.prototype) // true // 建構函式的顯示原型（prototype）的 constructor 屬性指向原建構函式 console.log(C === C.prototype.constructor) // true // 建構函式 C、Function 與 Object 的隱式原型（__proto__）指向構造該物件的建構函式 Function 的顯示原型（prototype） console.log(C.__proto__ === Function.prototype) // true console.log(Function.__proto__ === Function.prototype) // true console.log(Object.__proto__ === Function.prototype) // true // C.prototype 與 Function.prototype 的隱式原型（__proto__）指向構造該物件的建構函式 Object 的顯示原型（prototype） console.log(C.prototype.__proto__ === Object.prototype) // true console.log(Function.prototype.__proto__ === Object.prototype) // true // Object.prototype 的隱式原型（__proto__）等於 null console.log(Object.prototype.__proto__ === null) // true ``` 上述程式碼示例中的完整原型鏈關係如下圖：  從上圖我們可以總結： 1. 所有的（隱式）原型鏈的最末端最終都會指向 null（JS不允許有迴圈原型鏈，避免死迴圈） 2. 所有函式預設都是有 Function 建構函式建立，即所有函式的隱式原型（_\_proto__）都指向 Function.prototype。 3. 所有物件預設都繼承自Object物件，即預設情況下，所有物件的（隱式）原型鏈的末端都指向 Object.prototype。 注：所謂預設情況，即沒有手動修改原型鏈關係。
**3.參考** [JS中一切都是物件嗎？看這一篇就知道了](https://zhuanlan.zhihu.com/p/65059409) [js中__proto__和prototype的區別和關係？](https://www.zhihu.com/question/34183746) [深入理解JavaScript系列（10）：JavaScript核心（晉級高手必讀篇）](https://www.cnblogs.com/TomXu/archive/2012/01/12/2308594.html) [深入理解JavaScript系列（18）：面向物件程式設計之ECMAScript實現（推薦）](https://www.cnblogs.com/TomXu/archive/2012/02/06/233060