🔸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:
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.

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

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

Previouspolymorphism Nextprototype chain

Last updated 3 years ago

Was this helpful?