Static Properties and Functions in JavaScript
In an ES6 class, the static keyword lets you
define a function on the class itself, as opposed to instances of the class.
class MyClass {
static myFunction() {
return 42;
}
}
typeof MyClass.myFunction; // 'function'
MyClass.myFunction(); // 42
// `myFunction()` is a function on `MyClass`, **not**
// instances of `MyClass`
const obj = new MyClass();
obj.myFunction; // undefinedIn JavaScript, a class is an object like any other. So statics let you define
functions on the class within the class definition. Equivalently, you can
just assign a function to MyClass:
class MyClass {}
MyClass.myFunction = function() {
return 42;
};
MyClass.myFunction(); // 42With this
Within static functions, this refers to the class.
class MyClass {
static myFunction() {
return this;
}
}
MyClass.myFunction() === MyClass; // trueStatic Properties
Static properties, also known as class fields, are currently a Stage 3 TC39 proposal, which means they are technically not part of the JavaScript language yet. However, they are supported in more recent versions of Google Chrome.
class MyClass {
static answer = 42;
}
MyClass.answer; // 42Be careful when using static properties with non-primitive values. If you use inheritance with non-primitive static properties, each class that inherits from your class will have the same copy of the object.
class MyClass {
static val = new Object();
}
class MyChildClass extends MyClass {}
MyChildClass.val === MyClass.val; // true