Classes

JavaScript classes are introduced in ECMAScript 6 and are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JS classes provide a much simpler and clearer syntax to create objects and dealing with inheritance.

Defining classes

Classes are in fact functions, and just like you can define function expressions and function declarations, the class syntax has the two opponents:

• class expressions and
• class declarations.

Class declarations

One way to define a class is a class declaration. For that, you need a class keyword and a name of the class ("Polygon" here).

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

A difference between function declarations and class declarations is that function declarations are hoisted and class decorations are not. You first need to declare your class and then access it, otherwise code like the following will throw a ReferenceError:

var p = new Polygon(); // ReferenceError

class Polygon {}

Class expressions

A class expression is another way to define a class and it can be named or unnamed. If named, the name of the class is local the class body only.

// unnamed
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Polygon = class Porygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Class bodies and method definitions

The body of a class is the part that is in curly brackets ({}).This is were you define class members, such as methods or constructors.

Strict mode

The body of class declarations and class expressions is executed in strict mode.

Constructor

Static methods

Sub classing with extends

Sub classing built-in objects

Super class calls with super

Examples

Specifications

Browser compatibility

See also

• Functions
• class declaration
• class expression
• super