次世代 Hugo

無駄を削ぎ、本質を研ぐ

基本型別之 Prototype Chain

Sam Xiao's Avatar 2021-01-27

ECMAScript 之基本型別有 String、Number、Boolean、Object、Array 與 Function，可由其 Prototype Chain 更了解這些型別特性。

Version

ECMAScript 2015

String

let s = ''

s.__proto__ // ?
s.__proto__ === String.prototype // ?

s.__proto__.__proto__ // ?
s.__proto__.__proto__ === Object.prototype // ?

s.__proto__.__proto__.__proto__ // ?
s.__proto__.__proto__.__proto__ === null // ?

  • s 為 empty string，可發現其 prototype 為 String Object，亦為 String() 的 prototype property

  • s.__proto__ 的 prototype 為 Object，亦為 Object() 的 prototype property

  • s.__proto__.__proto__ 的 prototype 為 null

chain006

由以上 __proto__ 關係可發現：

  • Empty string 的 prototype 為 String
  • String 的 prototype 為 Object
  • Object 的 prototype 為 null

chain000

Number

let n = 1

n.__proto__ // ?
n.__proto__ === Number.prototype // ?

n.__proto__.__proto__ // ?
n.__proto__.__proto__ === Object.prototype // ?

n.__proto__.__proto__.__proto__ // ?
n.__proto__.__proto__.__proto__ === null // ?

  • n 為 1，可發現其 prototype 為 Number Object，亦為 Number() 的 prototype property

  • n.__proto__ 的 prototype 為 Object，亦為 Object() 的 prototype property

  • n.__proto__.__proto__ 的 prototype 為 null

chain007

由以上 __proto__ 關係可發現：

  • 1 的 prototype 為 Number
  • Number 的 prototype 為 Object
  • Object 的 prototype 為 null

chain001

Boolean

let b = true

b.__proto__ // ?
b.__proto__ === Boolean.prototype // ?

b.__proto__.__proto__ // ?
b.__proto__.__proto__ === Object.prototype // ?

b.__proto__.__proto__.__proto__ // ?
b.__proto__.__proto__.__proto__ === null // ?

  • b 為 true，可發現其 prototype 為 Boolean Object，亦為 Boolean() 的 prototype property

  • b.__proto__ 的 prototype 為 Object，亦為 Object() 的 prototype property

  • b.__proto__.__proto__ 的 prototype 為 null

chain008

由以上 __proto__ 關係可發現：

  • true 的 prototype 為 Boolean
  • Boolean 的 prototype 為 Object
  • Object 的 prototype 為 null

chain002

Object

let o = {}

o.__proto__ // ?
o.__proto__ === Object.prototype // ?

o.__proto__.__proto__ // ?
o.__proto__.__proto__ == null // ?

  • o 為 empty object，可發現其 prototype 為 Object，亦為 Object() 的 prototype property

  • o.__proto__ 的 prototype 為 null

chain009

由以上 __proto__ 關係可發現：

  • Empty object 的 prototype 為 Object
  • Object 的 prototype 為 null

chain003

Array

let a = []

a.__proto__ // ?
a.__proto__ === Array.prototype // ?

a.__proto__.__proto__ // ?
a.__proto__.__proto__ === Object.prototype // ?

a.__proto__.__proto__.__proto__ // ?
a.__proto__.__proto__.__proto__ === null // ?

  • a 為 empty array，可發現其 prototype 為 Array Object，亦為 Array() 的 prototype property

  • a.__proto__ 的 prototype 為 Object，亦為 Object() 的 prototype property

  • a.__proto__.__proto__ 的 prototype 為 null

chain010

由以上 __proto__ 關係可發現：

  • Empty array 的 prototype 為 Array
  • Array 的 prototype 為 Object
  • Object 的 prototype 為 null

chain004

Function

let f = () => {}

f.__proto__ // ?
f.__proto__ === Function.prototype // ?

f.__proto__.__proto__ // ?
f.__proto__.__proto__ === Object.prototype // ?

f.__proto__.__proto__.__proto__ // ?
f.__proto__.__proto__.__proto__ === null // ?

  • f 為 empty function，可發現其 prototype 為 Function Object，亦為 Function() 的 prototype property

  • f.__proto__ 的 prototype 為 Object，亦為 Object() 的 prototype property

  • f.__proto__.__proto__ 的 prototype 為 null

chain011

由以上 __proto__ 關係可發現：

  • Empty function 的 prototype 為 Function
  • Function 的 prototype 為 Object
  • Object 的 prototype 為 null

chain005

Conclusion

  • 可發現 String、Number、Boolean、Array 與 Function 的 prototype 都是 Object
  • 可發現 prototype chain 最頂層都是 null
  • 雖然 ECMAScript 號稱支援 first-class function，但其實 function 本質仍是 Object，這也解釋了為什麼每個 function 天生具有 call()、apply() 與 bind()，這些都來自於 Function.prototype，也正是每個 function 的 prototype

# ECMAScript