🍄class

🚧 under construction

JS ⟩ value ⟩ object ⟩ class

(declaration) ⭐️ ES6 (2015)

creates a new class and gives it a name (identifier).

no commas between class member declarations❗
private member identifiers are prefixed with hash (#).

// ⭐️ class definition
class A { 

    // ⭐️ instance members  (# means "private")
    publicProp;                     // this.publicProp = undefined (by default)
    publicMethod() { ... }          // this.publicMethod()
    
    #privateProp;                   // this.#privateProp
    #privateProp2 = 0;
    
    get #privateGetter() { ... }    // this.#privateGetter
    #privateMethod() { ... }        // this.#privateMethod()
    
    // ⭐️ static members
    static staticProp;              // A.staticProp
    
    // ⭐️ if omitted, a default (empty) constructor is created automatically.
    constructor() { ... }
}

// ⭐️ class expression
let B = class { ... }

⭐ class declaration is not hoisted❗

⛔ cannot use a class before its declaration ❗(👉 temporal dead zone)

a class's prototype (property) is read-only❗

⭐️⭐️⭐️ you can change the prototype of a function, but not that of a class.

// overwrite a function's prototype is OK
func.prototype = {}     // ✅ OK

// overwrite a class's prototype won't work
Class.prototype = {}    // ❌ won't work (ignored silently❗️)

⛔ ReferenceError: cannot access '...' before initialization.

an error mostly caused by referencing a let/ const/ class in its temporal dead zone❗

using typeof on lexical declaration (let/ const/ class) in its temporal dead zone will throw a ReferenceError.

// ⭐ temporal dead zone (start)
// ------------------------------
// typeof aLet;       // ⛔ ReferenceError: Cannot access 'aLet' before initialization
// typeof aConst;     // ⛔ ReferenceError: Cannot access 'aConst' before initialization
// typeof aClass;     // ⛔ ReferenceError: Cannot access 'aClass' before initialization

typeof undeclared;        // ❗ 'undefined'

// ⭐ lexical declarations (let/const/class)
// --------------------------------------------
let aLet;                 // ⭐ initialized to `undefined`
const aConst = "hello";
class aClass {}

replit：TDZ: let/const/class

What class User {...} does:

creates a function User, function body taken from constructor().
stores methods in User.prototype.

⭐️ class is different from a regular function：

labelled by a special internal property [[IsClassConstructor]].
must be called with new.
methods are non-enumerable. (not enumerated in a for...in loop)
class body code always use strict.

⭐️ 注意：class 的語法與直接寫一個物件(literal object)的方式不同。

// ⭐️ property/method/getter/setter 間都要用「逗號」隔開❗️
let user = {

  name   : "John",    // ⭐️ 屬性間用「逗號」隔開
  surname: "Smith",

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  },                  // ⭐️ method/getter/setter 間也要用「逗號」隔開

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

not block：

object literal / class / switch ( no block scope❗)
function's scope is different from a block scope❗

📗 You Don't Know JS Yet: Scopes & Closrues

replit

⭐️ class definition

class User {

    // -------------------------
    //     ⭐️ static members
    // -------------------------
    
    static planet = "Earth";           // static property

    static staticMethod() {            // static method
        return 'static method'
    }
    
    static get age() { return this._age }     // getter

    static set age(value) {                   // setter
        if (value < 0) { return }
        this._age = value
    }

    // -------------------------
    //     ⭐️ class fields
    // -------------------------
    
    age = 0;                        // regular class field
    hobby = prompt('any hobby?');   // ⭐️ function value as property value
    boundMethod = () => { };        // 🔗 bound method (`this` === instance)

    // -------------------------
    //     ⭐️ getters/setters
    // -------------------------
    
    get name() { return this._name }        // getter
    set name(value) { this._name = value }  // setter

    // -----------------
    //     ⭐️ methods
    // -----------------

    constructor() { }                    // ⭐️ constructor
    method() { }                         // regular method
    ['say' + 'Hi']() { log(`hello`) }    // ⭐ computed-name method
}

⭐️ class expression

// ⭐️ class expression
let User2 = class {
  sayHi() {}
};

// ⭐️ class expression as return value
function returnUserClass(){
    return class {
      sayHi() {}
    };
}

Notes about Google Apps Script：

// • (static/instance) "class fields".
//   ❌ GAS 不支援
//   ✅ 可用 (static/instance) getters/setters 代替.

💈範例：

let user = new User('Mary');
user.name = 'Joe';                  // ⭐ setter: this._name = 'Joe'
user.sayHi();                       // "hello"

User.age = -9;                      // "age cannot be negative: -9"
User.age = 10;

[
    user.name,           // "Joe"
    user.hobby,
    user.planet,         // undefined

    User.planet,         // "Earth"
    User.staticMethod(), // "static method"

    User.age,            // 10

].forEach(x => log(x));

Previousconstructor Nextinitialization

Last updated 2 months ago

Was this helpful?