Static properties and methods

JavaScript Static Properties and Methods （JavaScript静态属性和方法）

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. （关键字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. （类构造函数Car是Car.staticMethod ()调用中this的值。这是根据“点之前的对象”规则进行的。）

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 ("HTML", new Date (2020, 1, 1)),）
 new Book("CSS", new Date(2020, 0, 1)),
（new Book ("CSS", new Date (2020, 0, 1)),）
 new Book("JavaScript", new Date(2020, 2, 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. （在此示例中， Book.compare位于文章的“上方” ，作为区分它们的手段。它不是一个article方法，而是整个类的方法。）

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
（//请记住， 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(). （因此，每当您需要创建今天的摘要时，都需要调用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 #

Static Properties （静态属性）

Before starting to learn, note that this is a recent addition to the language, and its examples work in the latest Chrome. （在开始学习之前，请注意，这是该语言的最新版本，其示例适用于最新的Chrome浏览器。）

Static properties look like ordinary class properties, but starting with static, like this:

class Book {
 static site = "w3cdoc";
}
console.log(Book.site); // w3cdoc

So, it’s the same as a direct assignment to Book, like this:

Book.site = "w3cdoc";

Inheritance of Static Properties and Methods #

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 ("白车", 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. （- MyCar函数继承自Car函数。）

• The MyCar.prototype inherits from the Car.prototype. （- MyCar.prototype继承自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 #

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(). （例如，用于比较Book.compare (book1, book2)的方法或所谓的工厂方法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. （静态方法和属性被认为是继承的。）