Static Properties and Methods
The keyword static describes a static method for a class. So, it’s likely to assign a method to the class function and not to its "prototype". Methods like this are generally known as static.
In a class, they start with the static keyword, as follows:
class Car {
static staticMethod() {
console.log(this === Car);
}
}
Car.staticMethod(); // true
So, it’s the same as directly assigning it as a property:
class Car {}
Car.staticMethod = function () {
console.log(this === Car);
};
Car.staticMethod(); // true
The class constructor Car is the value of this in Car.staticMethod() call. It’s according to the “object before dot” rule.
As a rule, developers use static methods for implementing functions that belong to the class and not to any specific object of it.
For example, you have Book objects, and a function is required to compare them. Adding Book.compare method might be a natural solution. Here is an example:
class Book {
constructor(title, date) {
this.title = title;
this.date = date;
}
static compare(bookA, bookB) {
return bookA.date - bookB.date;
}
}
// usage
let books = [
new Book("HTML", new Date(2020, 1, 1)),
new Book("CSS", new Date(2020, 0, 1)),
new Book("JavaScript", new Date(2020, 2, 1)),
new Book("Git", new Date(2019, 11, 1))
];
books.sort(Book.compare);
console.log(books[0].title); // Git
In this example, Book.compare stands “above” articles, as a means of distinguishing them. It’s not an article method, but the method of the whole class.
Another solution is the so-called “factory” method. Let’s see that few ways are necessary for creating an article:
- To create it by specific parameters (date, title, and more).
- To create an empty article, including today’s date.
- Somehow in another way.
You can implement the first way by the constructor. For the second one, you are recommended to make a static method of the class.
Like Book.createBookToday() in the following example:
class Book {
constructor(title, date) {
this.title = title;
this.date = date;
}
static createBookToday() {
// remember, this = Book
return new this("Javascript", new Date());
}
}
let book = Book.createBookToday();
console.log(book.title); // Javascript
So, anytime you need to create the summary of today, you need to call Book.createBookToday().
Also, you have the option of using static methods in database-related classes for searching/saving/removing entities from the database, like here:
// assuming Book is a special class for managing articles
// static method to remove the article:
Book.remove({
id: 123
});Static Properties¶
Before starting to learn, note that this is a recent addition to the language, and its examples work in the latest Chrome.
Static properties look like ordinary class properties, but starting with static, like this:
class Book {
static site = "Web";
}
console.log(Book.site); // Web
So, it’s the same as a direct assignment to Book, like this:
Book.site = "Web";Inheritance of Static Properties and Methods¶
Static methods and properties are inherited.
Let’s take a look at here:
class Car {
static planet = "Earth";
constructor(name, speed) {
this.speed = speed;
this.name = name;
}
drive(speed = 0) {
this.speed += speed;
console.log(`${this.name} drives with speed ${this.speed}.`);
}
static compare(carA, carB) {
return carA.speed - carB.speed;
}
}
// Inherit from Car
class MyCar extends Car {
parked() {
console.log(`${this.name} is parked!`);
}
}
let cars = [
new MyCar("White car", 60),
new MyCar("Black car", 80)
];
cars.sort(MyCar.compare);
cars[0].drive(); // White car drives with speed 60.
console.log(MyCar.planet); // Earth
So, at the time, we call MyCar.compare, the inherited Car.compare is called. It works as demonstrated in the picture below:
So, MyCar extends Car generates two [[Prototype]] references. They are the following:
- The MyCar function inherits from the Car function.
- The MyCar.prototype inherits from the Car.prototype.
Consequently, inheritance operates for regular, as well as static methods.
Let’s check it:
class Car {}
class MyCar extends Car {}
// for statics
console.log(MyCar.__proto__ === Car); // true
// for regular methods
console.log(MyCar.prototype.__proto__ === Car.prototype); // true
Summary¶
In general, developers use static methods for the functionality that belongs to the whole class. That doesn’t relate to a specific class instance.
For instance, a method for comparison Book.compare(book1, book2) or a so-called factory method Book.createBookToday().
Static properties are applied when it’s necessary to store class-level data, not bound to an instance.
Static methods and properties are considered inherited.
