JS: Class

What does Keyword “class” Do Exactly

Class is a convenient way to define a function that is called to create new objects with default methods and parent object.

When you have class Cc {body}, it creates one Constructor function Cc, with static methods, and this function has a property named "prototype" (that is, Cc.prototype), and the value of this property is a object that is the parent of any object created by the constructor Cc.

1. Cc → This is a special constructor function object. This is the function you call to create a new object, by new Cc(…). The Cc has properties that's all the static methods you defined in body.
2. Cc.prototype → This is a data object (like {…}). It is the string property "prototype" of Cc. This object Cc.prototype have properties that's all the non-static methods you defined in body.

Then, when you create a object by new Cc(…), its parent will be set to Cc.prototype.

Note, JavaScript class is not like Java, Python, Ruby's class model. 〔see Prototype and Inheritance〕

Here is detail.

When a class is defined, for example, this:

class Cc { contructor (params) {body} m1 m2 static s1 static s2 }

A function object named Cc is created. (typeof Cc is "function") Cc cannot be called directly, must be called with the operator new. The Cc is called the “constructor”, and its behavior is in the method with constructor keyword.

All static methods (e.g. s1, s2) is attached as properties to Cc.

A property key "prototype" is created. The value of Cc.prototype is a new data object. It has properties of all the methods defined in Cc, except the constructor function and static methods, and plus a string property key named "constructor", whose value is Cc itself.

That is, the value of Cc.prototype is this:

{ "constructor": Cc, m1, m2 }

When new Cc(args) is called:

1. A new temporary empty object object T is created. Parent of T is Cc.prototype.
2. Constructor method is called with arguments args, its this Binding is T.
3. If the constructor method has return statement and returns a value of Object Type, then that object is returned. Else, T is returned.

// The class keyword behavior in detail

class Cc {
  constructor(x) {
    // constructor create a new object. This new object is referred to by keyword 「this」.  Do not use return statement
    this.kk = x; // add a property
  }

  // in the function body, keyword 「this」 refer to Cc
  static ss(x) {
    return "ss called";
  }

  // in the function body, keyword 「this」 refer to any instance of Cc
  ff(x) {
    // return the value of property kk specific to a instance
    return this.kk;
  }
}

// Cc now has property "ss"
console.log(Cc.hasOwnProperty("ss"));

// Cc now has property "prototype"
console.log(Cc.hasOwnProperty("prototype"));

// Cc.prototype has property "ff"
console.log(Cc.prototype.hasOwnProperty("ff"));

// Cc.prototype has property "constructor"
// this is automatically added by JS
// the value of Cc.prototype.constructor is Cc itself.
console.log(Cc.prototype.hasOwnProperty("constructor"));
console.log(Cc.prototype.constructor === Cc);

// ---------------------------------------------------

// create a object (an instance of Cc)
const xcc = new Cc(3);

// the instance has a property kk, as defined by the constructor method defined in Cc
console.log(xcc.hasOwnProperty("kk"));

// parent of the instance is Cc.prototype
console.log(Reflect.getPrototypeOf(xcc) === Cc.prototype);

Class Syntax

• Class Syntax

Class Expression

• Class Expression

Class Must be Defined Before Call (No Name Hoisting)

Class name is not hoisted. (regardless it's defined via declaration or expression) This means, class declaration must come before the class is called.

// class must be defined before call

const xx = new Cc();
// error: Uncaught ReferenceError: Cannot access 'Cc' before initialization

class Cc {}

// class must be defined before call
// here's a example with class expression

const xx = new Cc();
// error: Uncaught ReferenceError: Cannot access 'Cc' before initialization

const Cc = class {};

Class Must be Called with “new”

Class function must be called with keyword new. It cannot be called like a function by itself.

class Cc {}
Cc();
// error: Uncaught TypeError: Class constructor Cc cannot be invoked without 'new'

Define Getter/Setter Properties

To define getter/setter properties, just use the get or set keyword in front of the method definition.

〔see Getter Setter Properties〕

class Cc {
  // getter property
  get gg() {
    return 3;
  }
}

const xx = new Cc();

console.log(xx.gg === 3);