Web/JavaScript/Reference/Operators/class

From Get docs


The class expression is one way to define a class in ECMAScript 2015. Similar to function expressions, class expressions can be named or unnamed. If named, the name of the class is local to the class body only.

JavaScript classes use prototype-based inheritance.


Syntax

const MyClass = class [className] [extends otherClassName] {
    // class body
};

Description

A class expression has a similar syntax to a class declaration (statement). As with class statements, the body of a class expression is executed in strict mode.

There are several differences between class expressions and class statements, however:

  • Class expressions may omit the class name ("binding identifier"), which is not possible with class statements.
  • Class expressions allow you to redefine (re-declare) classes without throwing a SyntaxError. This is not the case with class statements.

The constructor method is optional. Classes generated with class expressions will always respond to typeof with the value "function".

'use strict';
let Foo = class {};  // constructor property is optional
Foo = class {};      // Re-declaration is allowed

typeof Foo;             // returns "function"
typeof class {};        // returns "function"

Foo instanceof Object;   // true
Foo instanceof Function; // true
class Foo {}            // Throws SyntaxError (class declarations do not allow re-declaration)

Examples

A simple class expression

This is just a simple anonymous class expression which you can refer to using the variable Foo.

const Foo = class {
  constructor() {}
  bar() {
    return 'Hello World!';
  }
};

const instance = new Foo();
instance.bar();  // "Hello World!"
Foo.name;        // "Foo"

Named class expressions

If you want to refer to the current class inside the class body, you can create a named class expression. The name is only visible within the scope of the class expression itself.

const Foo = class NamedFoo {
  constructor() {}
  whoIsThere() {
    return NamedFoo.name;
  }
}
const bar = new Foo();
bar.whoIsThere();  // "NamedFoo"
NamedFoo.name;     // ReferenceError: NamedFoo is not defined
Foo.name;          // "NamedFoo"

Specifications

Specification
ECMAScript (ECMA-262)The definition of 'Class definitions' in that specification.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
class Chrome

Full support 42

Edge

Full support 13

Firefox

Full support 45

IE

No support No

Opera

Full support 29

Safari

Full support 7

WebView Android

Full support 42

Chrome Android

Full support 42

Firefox Android

Full support 45

Opera Android

Full support 29

Safari iOS

Full support 7

Samsung Internet Android

Full support 4.0

nodejs Full support 6.0.0


Full support 6.0.0


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
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also