🔰prototype chain
JS ⟩ value ⟩ object ⟩ prototype ⟩ chain
the linked series of prototype objects of an object is called it's prototype chain.
從下圖可看出 base class 與 derived class 的連結(繼承)方式，其實是不一樣的：
身為使用者自創的第一個 class，base class A 與 A.prototype 所連接的分別是 Function.prototype 與 Object.prototype。
derived class B 與 B.prototype 則分別連接 A 與 A.prototype。
prototype chain can't go in circles.
the assignment of a property (dot/bracket notation) always creates/sets a property in the original object, it never modifies objects in the prototype chain.
function's prototype (property) - new instances' prototype/parent object.
object's property - object's parent in prototype chain.
printPrototypeChain() - print the prototype chain of an object.
"obj instanceof A" checks if
A.prototypeis in the prototype chain ofobj.function's prototype is used in prototype chain.
method uses [[HomeObject]]'s prototype to trace super.
replit ⟩ class B extends A
const { log } = console;
// ---------------------- main ------------------------------------
class A {}
class B extends A {};
let a = new A();
let b = new B();
// b's prototype chain
const b1 = b.__proto__; // B.prototype
const b2 = b1.__proto__; // A.prototype
const b3 = b2.__proto__; // Object.prototype
const b4 = b3.__proto__; // null
// B's prototype chain
const B1 = B.__proto__;
const B2 = B1.__proto__;
const B3 = B2.__proto__;
const B4 = B3.__proto__;
// ---------------------- console ----------------------------------
[
// b's prototype chain
b1 === B.prototype, // true: b is a `B`
b2 === A.prototype, // true
b3 === Object.prototype, // true
b4 === null, // true
B1 === A, // true: B inherits from A
B2 === Function.prototype, // true: A is a `function`.
B3 === Object.prototype, // true: `Function.prototype` is an `Object`.
B4 === null, // true: `Object.prototype` inherits from nothing.
].forEach(x => log(x));ObjectPlayground - visualize prototype chain (cool ⭐️)
Last updated
Was this helpful?