JavaScript Classes
Static members belong to the class itself rather than to any instance.
You call them on the class name, not on an object built from it.
Math.max and Array.from are static methods you already use.
Example
javascript
class MathHelper {
static double(n) {
return n * 2;
}
}
console.log(MathHelper.double(5));No instance was created; the method belongs to the class.
static before a method puts it on the class.
It is called as ClassName.method().
Instances cannot see static members, and static members cannot see instance properties.
Syntax
javascript
class Name {
static method() {}
static property = value;
}Call them on the class, never on an instance.
This is the most common surprise.
Example
javascript
class Helper {
static help() {
return "helping";
}
}
const instance = new Helper();
console.log(typeof instance.help);
console.log(typeof Helper.help);The output is undefined then function.
A static property is shared by the whole class.
Example
javascript
class Config {
static version = "1.0";
}
console.log(Config.version);There is one value, not one per instance.
A static property is the natural place to keep a running total.
Example
javascript
class User {
static count = 0;
constructor() {
User.count++;
}
}
new User();
new User();
console.log(User.count);The output is 2.
A static method can build and return an instance.
This is how you work around having only one constructor.
Example
javascript
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static origin() {
return new Point(0, 0);
}
static fromArray(pair) {
return new Point(pair[0], pair[1]);
}
}
console.log(Point.origin().x + " " + Point.fromArray([3, 4]).y);The output is 0 4.
Inside a static method, this is the class itself.
Example
javascript
class Registry {
static items = [];
static add(item) {
this.items.push(item);
return this.items.length;
}
}
console.log(Registry.add("first"));this.items here means Registry.items.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Static Members</title>
</head>
<body>
<h1>Static Members</h1>
<p id="out"></p>
<script>
class User {
static count = 0;
constructor(name) {
this.name = name;
User.count++;
}
static describe() {
return User.count + " users created";
}
}
new User("Ada");
new User("Grace");
new User("Alan");
document.getElementById("out").textContent = User.describe();
</script>
</body>
</html>Run the above example in the Try It Editor.
Try calling it on an instance:
Try ada.describe() and see that static methods are not there.
static puts a member on the class itself.ClassName.member.this is the class.Static members are for behaviour that belongs to the type, not to one object.
Factory methods are the most useful pattern they enable.
If a method never touches this, it probably wants to be static.