JavaScript Classes

External

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Internal

• JavaScript Concepts

Overview

A JavaScript class is a syntactical superstructure in top of the language's existing prototype-based inheritance, and it does not introduce a new object-oriented inheritance model in JavaScript. A class is a special function, so like in the functions' case, a class syntax has two components: declarations and expressions.

Class Hoisting

An important difference between function declaration and class declaration is that function declaration and hoisted, while the class declarations are not: you first need to declare the class and then access it, otherwise a ReferenceError is thrown.

Declaration

Use the class keyword:

class Simplest {
  constructor(content) {
    this.content = content;
  }
}

Class Expression

A class expression is another way to define a class, and it can be named or unnamed. The name given to a named expression is local to the class' body. It can be retrieved through the class' and not an instance's name property.

let Simplest = class {
  constructor(content) {
    this.content = content;
  }
}
console.log(Rectangle.name);

Syntax Elements

Body

The body of a class is contained within curly braces {...}. It contains class members: constructor and methods. The body of a class is executed in strict mode, the code is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.

Constructor

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method. A constructor can use the super keyword to call the constructor of the super class.

class Simplest  {

  constructor(content, size) {
    this.content = content;
    this.size = size;
  }

  ...
}

Constructor invocation:

var s = new Simplest("blue")

Prototype Methods

class Simplest  {
 ...

 get content() {
    return.content;
 }

 calculateSomething() {
    return this.size * 10
 }
}

Static Methods

The static keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

Instance Properties

Instance properties must be defined inside the constructor or other class methods:

class Something {
  constructor(content) {
    this.content = content;
   }
}

They must be accessed while being prefixed to this..

Static Properties

Static (class-side) data properties and prototype data properties must be defined outside of the class body declaration:

Something.somethingElse = 10;
Something.prototype.color = "blue";

Boxing with Prototype and Static Methods

TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Field Declarations

TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes