Relawan kami belum menerjemahkan artikel ini ke bahasa Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikannya!
Anda juga dapat membaca artikel ini dalam 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.

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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Class definitions' in that specification.
Standard Initial definition.
ECMAScript 2016 (ECMA-262)
The definition of 'Class definitions' in that specification.
Standard  
ECMAScript 2017 (ECMA-262)
The definition of 'Class definitions' in that specification.
Standard  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Class definitions' in that specification.
Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 42Edge Full support YesFirefox Full support 45IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 42Chrome Android Full support 42Edge Mobile Full support YesFirefox Android Full support 45Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0nodejs 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

Tag Dokumen dan Kontributor

Terakhir diperbarui oleh: wbamberg,