🔰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。

"obj instanceof A" checks if A.prototype is in the prototype chain of obj.
function's prototype is used in prototype chain.
method uses [[HomeObject]]'s prototype to trace super.
extending built-in classes
extending objects

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));

Previousprototype NextprintPrototypeChain()

Last updated 1 year ago

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));