JS: class (keyword)

What is Keyword “class”

Class is an easy way to define a function MyClass that:

• MyClass is a Constructor, to be called with new.
• Define static methods.
• Define object's methods.
• Setup static methods as properties of MyClass.
• Setup MyClass.prototype as parent for the returned object of new MyClass() call.
• Setup methods as properties of MyClass.prototype.

Example

class MyClass { contructor (params) {body} static staticM1 (params) {body} static staticM2 (params) {body} method1 (params) {body} method2 (params) {body} }

• A function MyClass is created.
• MyClass cannot be called directly, must be called with the operator new.
• The MyClass is called the “constructor”, and its behavior is in the method with constructor keyword.

MyClass has these properties

• MyClass.staticM1
• MyClass.staticM2

A property MyClass.prototype is created. The value is:

MyClass.prototype = { "constructor": MyClass, method1: method1_function, method2: method2_function, }

When new MyClass(args) is called:

1. A new temporary empty object object T is created. Parent of T is MyClass.prototype.
2. The 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 MyClass {
  /*
constructor is a function. called when new MyClass() is called.
constructor is meant to return a new object.
In body of constructor, this new object is referred to by keyword this.
Do not use return statement in body. it so, lots things break.
    */
  constructor(x) {
    // add a property
    this.kk = x;
  }

  static static1(x) {
    return "static1 called";
  }

  method1(x) {
    // in the function body, keyword this refer to an instance of MyClass
    // return the value of property kk specific to a instance
    return this.kk;
  }
}

// MyClass now has property static1
console.log(MyClass.hasOwnProperty("static1"));

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

// MyClass.prototype has property method1
console.log(MyClass.prototype.hasOwnProperty("method1"));

// MyClass.prototype has property "constructor"
// the value of MyClass.prototype.constructor is MyClass itself.
console.log(MyClass.prototype.hasOwnProperty("constructor"));
console.log(MyClass.prototype.constructor === MyClass);

// HHHH------------------------------

// create an instance of MyClass
const xobj = new MyClass(3);

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

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

Class Declaration Syntax

The syntax for class declaration is:

class ClassName { contructor (params) {body} static staticM1 (params) {body} static staticM2 (params) {body} etc method1 (params) {body} method2 (params) {body} etc get getter1 () {body} get getter2 () {body} etc set setter1 (params) {body} set setter2 (params) {body} etc }

where a method has one of the following form, all are optional:

constructor (param) {body}

• This defines the Constructor function.
• This function is automatically called when new ClassName is called.
• There can only be one constructor. If not given, by default it is constructor () {}, which does nothing.

static name (param) {body}

This is called static method. 〔see Keyword “static” (static method)〕

name (param) {body}

This is called prototype method.

get name () {body}

This is called getter method. Also part of the prototype methods. 〔see Getter Setter Properties〕

set name (param) {body}

This is called setter method. Also part of the prototype methods. 〔see Getter Setter Properties〕

(Note: class body must all be function definitions.)

Example

// example of a class
class MyClass {
  constructor(x) {
    this.p = x;
    console.log("constructor called with arg " + x);
  }

  method1(x) {
    console.log("method1 called with arg " + x);
  }

  static static1(x) {
    console.log("static1 called with arg " + x);
  }
}

// HHHH------------------------------
// using the class

// static method is called directly, not via instance of a object
MyClass.static1(3);
// static1 called with arg 3

// create a instance
const xx = new MyClass(4);
// constructor called with arg 4

console.log(xx);
// MyClass { p: 4 }

xx.method1(2);
// method1 called with arg 2

Class Must be Defined Before Call (No Name Hoisting)

Class declaration must come before the class is called. (i.e. Class name is not hoisted.)

// class must be defined before call

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

class MyClass {}

Class Must be Called with “new”

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

class MyClass {}
MyClass();
// error: Uncaught TypeError: Class constructor MyClass 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 MyClass {
  // getter property
  get gg() {
    return 3;
  }
}

const xx = new MyClass();

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

Class Name Start with Capitalized Letter

This is by convention.