Our volunteers haven't translated this article into עברית yet. Join us and help get the job done!
You can also read the article in English (US).
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
var MyClass = class [className] [extends] { // class body };
Description
A class expression has a similar syntax to a class statement (declaration). However, with class expressions, you are able to omit the class name ("binding identifier"), which you can't with class statements. Additionally, class expressions allow you to redefine/re-declare classes and don't throw any type errors like class declaration. The constructor property is optional. And, typeof the classes generated using this keyword will always be "function".
Just like with class statements, the class body of class expressions is executed in strict mode.
'use strict'; var Foo = class {}; // constructor property is optional var 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, doesn't 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".
var Foo = class { constructor() {} bar() { return 'Hello World!'; } }; var 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. This name is only visible in the scope of the class expression itself.
var Foo = class NamedFoo { constructor() {} whoIsThere() { return NamedFoo.name; } } var bar = new Foo(); bar.whoIsThere(); // "NamedFoo" NamedFoo.name; // ReferenceError: NamedFoo is not defined Foo.name; // "NamedFoo"
Specifications
Browser compatibility
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 42 | Edge Full support Yes | 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 | Edge Mobile Full support Yes | 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.