JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

Hoisting

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

const p = new Rectangle(); // ReferenceError
class Rectangle {}

Class expressions

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

Note: Class expressions are subject to the same hoisting restrictions as described in the Class declarations section.

Class body and method definitions

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

Strict mode

The body of a class is executed in strict mode, i.e., code written here 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

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.

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.

Boxing with prototype and static methods

When a static or prototype method is called without a value for this, the this value will be undefined inside the method. This behavior will be the same even if the "use strict" directive isn't present, because code within the class body's syntactic boundary is always executed in strict mode.

If the above is written using traditional function-based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial this value. If the initial value is undefined, this will be set to the global object.

Autoboxing will not happen in strict mode, the this value remains as passed.

Instance properties

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

Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;

Field declarations

Public and private field declarations are an experimental feature (stage 3) proposed at TC39, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like Babel.

Public field declarations

With the JavaScript field declaration syntax, the above example can be written as:

Private field declarations

It's an error to reference private fields from outside of the class; they can only be read or written within the class body. By defining things which are not visible outside of the class, you ensure that your classes' users can't depend on internals, which may change version to version.

Private fields can only be declared up-front in a field declaration.

Private fields cannot be created later through assigning to them, the way that normal properties can.

Sub classing with extends

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

Species

For example, when using methods such as map() that returns the default constructor, you want these methods to return a parent Array object, instead of the MyArray object. The Symbol.species symbol lets you do this:

Mix-ins

Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".

EdgeFull support
13

FirefoxFull support
45

IENo support
No

OperaFull support
36

SafariFull support
9

WebView Android
?

Chrome AndroidFull support
Yes

Edge MobileFull support
13

Firefox AndroidFull support
45

Opera Android
?

Safari iOSFull support
9

Samsung Internet AndroidFull support
Yes

nodejsFull support
6.0.0

Full support
6.0.0

Full support
4.0.0

Disabled

Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.

Full support
5.0.0

Disabled

Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.

Legend

Full support

Full support

No support

No support

Compatibility unknown

Compatibility unknown

See implementation notes.

See implementation notes.

User must explicitly enable this feature.

User must explicitly enable this feature.

Running in Scratchpad

A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.