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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
classstatements. - Class expressions allow you to redefine (re-declare) classes without throwing a
TypeError. This is not the case withclassstatements.
The constructor property 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 TypeError (class statements 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
Browser compatibility
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
class | Chrome Full support 42 | Edge Full support 13 | Firefox Full support 45 | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 42 | Chrome Android Full support 42 | Firefox Android Full support 45 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 4.0 | nodejs
Full support
6.0.0
|
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.