窺探 JS 原型鏈的盡頭

這篇筆記延伸上一篇所提到的原型（prototype）的概念。

純值與物件型別

JavaScript 上所有的東西可以分成兩大類：純值 Primitive Types和物件型別 Object Type

基本型別(純值) Primitive Types

數字 number
字串 string
布林值 boolean
undefined
null
符號 symbol （ES6)

物件型別 Object Type

JavaScript 中除了 Primitive Types 以外的東西，全都是物件型別！

上述包含數字、字串、布林值、物件、陣列、函數都有 __proto__ 原型，且盡頭都會是 物件。

實驗

假設我們現在分別建立物件、函式和陣列：

//  Object
var obj = {
  name: 'Dylan',
}

//  function
var func = function () {
  console.log('Hello')
}

//  Array
var arr = ['this', 'is', 'an', 'array']

//  string
var str = 'This is string'

//  number
var num = 3

//  boolean
var boo = false

接著，我們會在 Google Chrome 的 console 視窗來分別檢視這些變數的__proto__。

物件 ( Object )

我們可以看到obj 這個物件本身的 __proto__ 也是一個物件，在下去就沒了（null），也就是 Object → Object → null。

而 obj.__proto__ 就是物件的原型物件，打開來看會發現裡面有許多 JavaScript 中專屬物件的內建方法。

如果我在 console 中輸入 obj.，也會出現一樣的 JavaScript 中專屬物件的內建方法：

由於 obj.__proto__ 仍然是一個物件，所以如果我輸入 obj.__proto__.的話，會得到一樣對於物件可以使用的方法：

函數 ( Function )

接著我們來看看函式，它會是 function → function → object → null，所以最後還是結束在 object。

如果我們想要看函式有哪些內建的方法可以用，我們可以輸入func. 或 func.__proto__. 就可以看到了，這裡我們就可以看到我們之前使用的 apply, bind, 和 call。

陣列 ( Array )

再來陣列的話則是array → array → object → null。

如果我們要看陣列有哪些方法可以用，一樣可以透過 arr. 或 arr.__proto__. 來檢視

這樣看下來可以知道：JS 物件的原型仍會是物件，而原型鏈的終點，就是 null。

字串、數字和布林值

同樣的方法也可以用來檢視字串、數字和布林值，這邊就不做下去了，打開 console 來試試看吧。

⎝༼ ◕Д ◕ ༽⎠