🔸prototype

function's `prototype` property.

JS ⟩ value ⟩ object ⟩ function ⟩ prototype

only a relatively small number of objects have a "prototype" property, it's these objects that define the prototypes for all the other objects.

let obj = new F();    // obj.__proto__ === F.prototype

⭐️ 重點

⚖️ function's prototype vs. class's prototype (property)

• function's prototype is writable. (can be reassigned)

• class's prototype is read-only❗(can't be reassigned)

function's prototype (property)

• is (only) used as a new object's prototype.

• should be either an object or null, other values won’t work❗

👉 javascript.info

⭐️ every function has a default prototype. (with the only constructor property that points back to the function itself)

function A(){}
A.prototype.constructor === A        // true

if A.prototype is an object, then let a = new A() will set a.__proto__ = A.prototype.

⭐️ 注意：

如果改寫函數的 prototype，如：A.prototype = {}，則往後的 new A() 物件就再也沒有 constructor 屬性，除非你自己在新的 prototype 中再加入 constructor 屬性❗️(舊的物件沒有影響，因為舊的 prototype 依然存在，舊的物件的 [[Prototype]] 屬性沒有改變，依然指向舊的 prototype)

🔴 主題

• prototype chain

👥 相關

• objects created by new F() has F.prototype as their prototype.

• object's prototype is different from function's prototype.

💈範例

• replit

const { log } = console;
const descriptor = (obj, prop) => log(Object.getOwnPropertyDescriptor(obj, prop));
const descriptors = (obj) => log(Object.getOwnPropertyDescriptors(obj));

// ⭐ function ---------------------------------------------------------

function F(name) {
  this.name = name;
}

descriptors(F);
// property    w e c    value
// ---------------------------------
// length      x x o    1
// name        x x o    'F'
// arguments   x x x    null
// caller      x x x    null              // ------------------------------------
// prototype   o x x    F {} ?  --------> // ⭐ 注意：
// ---------------------------------      //   F.prototype 是 writable❗
// w: writable (can reassign)             //   也就是說，F.prototype 是可以被換掉的❗
// e: enumerable (listed in for loops)    // ------------------------------------
// c: configurable (can delete or change flags)

// ⭐ every function has a default prototype
descriptors(F.prototype);
// property    w e c    value
// -----------------------------------
// constructor o x o    [Function: F]
// -----------------------------------

log(F.prototype.constructor === F);     // true

// new object from F                    // "-->" means "prototype chain"
let obj = new F("object");              // obj --> default prototype
log( obj.eats );                        // `undefined`

// object as new F.prototype
let animal = {
  eats: true
};

// ⭐ overwrite function's default prototype
F.prototype = animal;
log(F.prototype.constructor);                // `Object` (via prototype chain)
log(F.prototype.constructor === Object);     // true

// new object from F (again)
let obj2 = new F("object 2");                // obj2 --> animal 
log( obj2.eats );                            // true

// ⭐ class ---------------------------------------------------------

class A {}

descriptors(A);
// property    w e c    value
// ---------------------------------
// length      x x o    0
// name        x x o    'A'             // ----------------------------------------
// prototype   x x x    A {}   -------> // ⭐ 注意：
// ---------------------------------    //    A.prototype 的 writable == false❗
                                        //    也就是說 A.prototype 是「不能」被換掉的❗
descriptors(A.prototype);               // ----------------------------------------
// property    w e c    value
// -----------------------------------
// constructor o x o    [class A]
// -----------------------------------

const proto = A.prototype;
log( proto === A.prototype );                  // true

// instances of class A
let a = new A();

// ⭐ `A.prototype` is non-writable❗
const newProto = {};

// ----------------------------------------------------------------
A.prototype = newProto;        // ⭐⭐⭐ A.prototype 無法換掉❗❗❗
// ----------------------------------------------------------------

log( A.prototype === newProto );               // ⭐ false❗
log( A.prototype === proto );                  // true
log( A.prototype.constructor );                // [class A]

// console
[
    // `A` is a function.
    A.__proto__ === Function.prototype,        // true
    
    // every function has a "default prototype".
    A.prototype !== null,                      // true
    A.prototype.constructor === A,             // true
    
    // new object's [[Prototype]] is set to `A.prototype` automatically
    a.__proto__ === A.prototype,               // true
    
    // object's constructor can be found through its "prototype chain".
    // (provided its [[Prototype]] hasn't been overridden already)
    a.constructor === A,                       // true
    
].forEach(x => log(x));

📗 參考

• JS.info ⟩

  • Prototypal inheritance

  • Native prototypes

  • F.prototype

  • Prototype methods, objects without __proto__

🗣 討論

• What is Function.__proto__?

• How to change Class's Prototype in ES6

❓

問：

「 Google Apps Script 的 classes (如：Sheet, Range ...) 是否有 prototype」❓

答：

• 「 實驗結果是：沒有 ❗️」

• 「 Sheet 物件的 prototype 直接連結 Object.prototype 」

💾 程式：

function test_SheetPrototype() {

  const sheet = app.sheet.active;    // custom getter: returns `Sheeet`
  let obj = sheet;

  while (obj) {

    const keys = Reflect.ownKeys(obj);
    const n = keys.length;
    const k = 3;            // # of sliced items

    log(
      `object: ${obj}` + 
      `, type: ${typeName(obj)}` + 
      `, keys: (${n} items) [${keys.slice(0, k)}${n > k ? ' ...' : ''}]`
    );

    log(keys);              // show all own keys (enum + non-enum + symbol)
    obj = obj.__proto__;    // === Object.getPrototypeOf(obj)
  }
}

• 結果 ( prototype chain )

object       type       keys
------------------------------------------------------------------
Sheet       object    (141 items) [toString,getFilter,clear ...]
[Object]*   object    ( 12 items) [constructor,__defineGetter__,__defineSetter__ ...]
------------------------------------------------------------------
* last object in the prototype chain === Object.prototype ⭐️