🔸prototype

🚧 under construction

JS ⟩ value ⟩ object ⟩ prototype

desc

⭐️ 重點

• objects have a special hidden property [[Prototype]] that is either null or references another object (other types are ignored).

• that object is called a “prototype”.

• when we access an object's method/property, and it’s missing, JavaScript automatically takes it from the prototype.

__proto__

• is a getter/setter for [[Prototype]] and resides in Object.prototype.

• is considered outdated, modern methods are:

  • Object.create(proto, [descriptors])

  • Object.getPrototypeOf(obj)

  • Object.setPrototypeOf(obj, proto)

• to access [[Prototype]](which is hidden and internal).

// ⭐️ `__proto__` is a getter & setter for [[Prototype]]
obj.__proto__            // call getter
obj.__proto__ = proto    // call setter
Object.getPrototypeOf(obj)
Object.setPrototypeOf(obj, proto)

prototype chain can't go in circles.

🔴 主題

• IteratorPrototype - prototype of all built-in iterators.

👥 相關

• all objects created by object literal have the same prototype - Object.prototype.

• used in object's prototypal inheritance.

• function's prototype is used as new 's [[Prototype]].

• super === [[HomeObject]].[[Prototype]]⭐️

• [[Prototype]] is also cloned by clone(obj).

• "pure" object is an object without [[Prototype]] (=== null).

💈範例

下面的程式碼可以看出幾個特點：

• method (含 getter/setter) 有 dynamic this，程式碼中的this指的是誰，要看呼叫者(caller)是誰。

• 如果 method 中參照到this的方法或屬性，這時如果 caller (=this) 沒有此方法或屬性，那就會循著 prototype chain 往上找。

• 如果 method 中要設定this的屬性，這時不管 caller 有沒有此屬性，此屬性一定會被設定在 caller 身上，而不會循著 prototype chain 往上找，這點要特別注意❗️

• replit

const { log } = console;

// ------------------------ user ---------------------------
let user = {
    
    // instance properties
    name   : 'John',
    surname: 'Smith',

    // setter/getter
    set fullName(value) {
	[this.name, this.surname] = value.split(' ');
    },

    get fullName() {
	return `${this.name} ${this.surname}`;
    }
};

// -------------------------- admin -------------------------
let admin = {
    __proto__: user,        // ⭐ admin.__proto__ === user
    isAdmin: true,
};

// ------------------------- test --------------------------
[
    admin.fullName,                    // 📤 get: "John Smith"   (from `admin.__proto__`❗)
    admin.fullName = 'Alice Cooper',   // 🖊️ set: "Alice Cooper" (this === admin❗)
    admin.fullName,                    // 📤 get: "Alice Cooper" (from `admin`❗)
    
    user.fullName,                     // 📤 get: "John Smith"   (from `user`, this === user❗)
    
].forEach(x => log(x));

📘 手冊

• MDN ⟩ Object ⟩

  • Object.getPrototypeOf()

  • Object.setPrototypeOf()

  • Object.create()

📗 參考

• You Don't Know JS: this & Object Prototypes ⟩ Chapter 5: Prototypes

• JS.info ⟩

  • Class inheritance

  • Prototypal inheritance

  • F.prototype

  • Native prototypes - Object.prototype, Number.prototype, Array.prototype ...

  • Prototype methods, objects without __proto__

  • Class extends Object? - 說明 class A 與 class A extends Object 有何不同 ⭐️