This is an experimental technology, part of the ECMAScript 6 (Harmony) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.
Draft
This page is not complete.
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 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 declarations 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 Polygon { constructor(height, width) { this.height = height; this.width = width; } };
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 constructors.
Strict mode
The body of class declarations and class expressions is executed in strict mode.
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 a parent class.
Prototype methods
See also method definitions.
// TBD
Static methods
The static
keyword defines a static method for a class. Static methods are called without instantiating their class nor are they callable when the class is instantiated. Static methods are often used to create utility functions for an application.
// TBD
Sub classing with extends
The extends
keyword is used in class declarations or class expressions to create a class with a child of another class.
// TBD
Sub classing built-in objects
TBD
Super class calls with super
The super
keyword is used to call functions on an object's parent.
// TBD
ES5 inheritance syntax and ES6 classes syntax compared
TBD
Examples
TBD
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 6 (ECMA-262) The definition of 'Class definitions' in that specification. |
Release Candidate | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 42.0 | Available in the Nightly channel only (since February 2015) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | Not supported | Available in the Nightly channel only (since February 2015) | ? | ? | ? | 42.0 |