[JavaScript] Class

From ES6, JS has class.

JS is a prototype-based language. Therefore, classes in JS are slightly different from those in other object-oriented languages.

A class is basically a data type that collected variables and methods for similar purposes.

Class Declaration

A statement or expression can declare classes.

Both anonymous and named declarations are possible in expression.

class Person {}

const Person = class {};
const Test = class TestClass {};

Classes are declared by the class keyword.

The class body of a class declaration is executed in strict mode.

Class declarations behave as if they were not hoisted similarly to function definitions.

Classes can have a constructor method optionally.

In addition, classes can only have a constructor method, prototype method, and static method.

class Person {
  constructor(name) {
    this.name = name;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name}`);
  }

  static sayHello() {
    console.log('Hello!');
  }
}

const me = new Person('HoYa');
me.greeting();
Person.sayHello();

A constructor should not use an explicit return keyword, because constructors implicitly return the class instance.

Class Field

JS has class fields, and it is similar to member variables in other languages.

class Person {
  name;

  constructor(name) {
    this.name = name;
  }
}

Class fields can be explicitly located on the outer of a constructor.

If class fields are located in the outer of a constructor, this keyword should be omitted.

However, if class fields are located in the inner of a constructor, this keyword should be attached.

If the initial value of class fields is omitted, it would be undefined.

class Person {
  #name = '';

  constructor(name) {
    this.#name = name;
  }

  get name() {
    return this.#name.trim();
  }
}

By default, class fields are public.

But, we can make it private using the # symbol.

Private class fields are accessible only to the inner of the class.

class Person {
  static name = 'HoYa';
  static #age = 18;
    
  static print() {
    console.log(`My name is ${Person.name}, and I'm ${Person.#age} years old.`);
  }
}

Person.print();

With the new feature, static class fields are available.

Static class fields and static methods are only binding to a class, not an instance.

Class Inheritance

Classes can be inherited using extends keyword.

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  eat() {
    return 'eat';
  }
}

class Dog extends Animal {
  eat() {
    return 'dog food';
  }

  cry() {
    return 'bark';
  }
}

const happy = new Dog('Happy', 3);
console.log(happy); // Dog { name: 'Happy', age: 3 }
console.log(happy.eat()); // dog food
console.log(happy.cry()); // bark

The derived class has all methods from the base class.

We can declare a new class by extending the base class by adding new methods or overriding existing methods.

 

We can also make derived classes using constructor functions.

function Base(param) {
  this.param = param;
}

class Derived extends Base {}

const derived = new Derived(7);

If we want to access to the base class from the derived class, we can do it using the super keyword.

class Base {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  print() {
    console.log(`A: ${this.a}, B: ${this.b}`);
  }
}

class Derived extends Base {
  constructor(a, b, c) {
    super(a, b);
    this.c = c;
  }

  print() {
    super.print()
    console.log(`and C: ${this.c}`);
  }
}

const derived = new Derived(1, 2, 3);
derived.print();
// A: 1, B: 2
// and C: 3

Arrow Methods

this in the arrow method can always refer to this in the upper context so that it can refer to the instance.

class App {
  constructor() {
    this.count = 0;
    this.$button = document.querySelector('.btn');
    this.$button.onclick = this.increase;
  }
  
  increase = () => this.$button.textContent = ++this.count;
}