Javascript 简明教程
JavaScript - Static Methods
What are Static Methods?
JavaScript 中的 static method 使用 static 关键字后跟方法名称定义。你可以通过引用类名而不是类的实例来执行静态方法。
A static method in JavaScript is defined using the static keyword followed by the method name. You can execute the static method by taking the class name as a reference rather than an instance of the class.
静态方法的主要优点是可以用来创建不需要类的实例即可执行的 utility 函数。例如， Math 对象包含各种 static methods ，我们可以通过 Math 类直接调用它。
The main benefit of the static method is that it can be used to create a utility function that doesn’t require the instance of the class for the execution. For example, a Math object contains various static methods, which we can invoke through Math class directly.
此外，可以使用静态方法将所有相关方法添加到一个命名空间中。此外，由于内存优化，静态方法比常规类方法具有更好的性能。
Also, you can use static methods to add all related methods under a single namespace. Furthermore, static methods give better performance than the regular class methods due to memory optimization.
在以下语法中，我们在名为 Table 的类中定义了一个名为 getSize() 的静态方法 −
In the following syntax, we define a static method called getSize() in the class called Table −
class Table {
static getSize() { // Static method
return "10 x 10";
}
}
Table.getSize(); // Static method invocation在上面的语法中，getSize() 是一个静态方法。我们使用类名来执行 getSize() 方法。
In the above syntax, getSize() is a static method. We used the class name to execute the getSize() method.
Examples
让我们借助一些不同用例示例来了解 JavaScript 静态方法
Let’s understand the JavaScript static methods with the help of some examples of difference use-cases −
Example: Static Method
在下面的示例中，printSize() 是一个静态方法，而 getSize() 是 table 类中的一个常规方法。你可以看到 printSize() 方法是使用 table 类名调用的，而 getSize() 方法是使用类实例执行的。
In the example below, printSize() is a static method, and getSize() is a regular method in the table class. You can see that printSize() method is invoked using the table class name, and getSize() method is executed using the class instance.
因此，该类可以同时包含静态和非静态方法。
So, the class can contain static and non-static both methods.
<html>
<body>
<p id = "demo"> </p>
<script>
const output = document.getElementById("demo");
class Table {
static printSize() {
return "The size of the table is: 20 x 20 <br>";
}
getColor() {
return "Black";
}
}
output.innerHTML = Table.printSize(); // Static method execution
const tableObj = new Table();
output.innerHTML += "The color of the table is: " + tableObj.getColor();
</script>
</body>
</html>The size of the table is: 20 x 20
The color of the table is: Black单个类还可以包含多个静态方法。
The single class can also contain multiple static methods.
Example: Multiple Static Methods
在下面的代码中，table 类包含 printSize() 和 getSize() 静态方法。这两个方法都是通过取类名作为引用来执行的。
In the below code, the table class contains the printSize() and getSize() static methods. Both methods are executed by taking the class name as a reference.
<html>
<body>
<p id = "output"> </p>
<script>
class Table {
static printSize() {
return "The size of the table is 20 x 20 <br>";
}
static getColor() {
return "The color of the table is Pink";
}
}
document.getElementById("output").innerHTML =
Table.printSize() + "br" +
Table.getColor();
</script>
</body>
</html>The size of the table is 20 x 20
brThe color of the table is Pink单个类可以包含多个具有相同名称的静态方法。当你执行具有相同名称的静态方法时，它将执行最后一个方法。
A single class can contain multiple static methods with the same name. When you execute the static method with the same name, it executes the last method.
Example: Static Methods with the Same Name
在下面的示例中，table 类包含重复的 printSize() 方法。在输出中，你可以观察到代码执行了第二个 printSize() 方法。
In the example below, the table class contains the duplicate printSize() method. In the output, you can observe that the code executes the second printSize() method.
<html>
<body>
<p id = "output"> </p>
<script>
class Table {
static printSize() {
return"The size of the table is: 20 x 20 <br>";
}
static printSize() {
return "The size of the table is: 30 x 30 <br>";
}
}
document.getElementById("output").innerHTML = Table.printSize(); // Static method execution
</script>
</body>
</html>The size of the table is: 30 x 30你也可以在构造函数中执行类的静态方法。你可以使用关键词 this，后跟构造函数关键词，再跟静态方法名称来执行构造函数中的静态方法。
You can also execute the static method of the class in the constructor. You can use this keyword followed by the constructor keyword followed by the static method name to execute the static method in the constructor.
Example: Static Method Execution in the Constructor
在下面的示例中，Num 类包含 getSqrt() 静态方法。我们在构造函数中执行了 getSqrt() 方法。
In the example below, the Num class contains the getSqrt() static method. We have executed the getSqrt() method in the constructor.
每当你创建一个 Num 类的新的对象时，它将把该数字的平方根存储在该类的“sqrt”属性中。
Whenever you create a new object of the Num class, it will store the square root of the number in the 'sqrt' property of the class.
<html>
<body>
<p id = "output">The square root of the 10 is: </p>
<script>
class Num {
constructor(a) {
// Static method execution
this.sqrt = this.constructor.getSqrt(a);
}
static getSqrt(a) {
return a * a;
}
}
const num1 = new Num(10);
document.getElementById("output").innerHTML += num1.sqrt;
</script>
</body>
</html>The square root of the 10 is: 100你也可以在非静态方法中执行静态方法。你需要使用类名作为引用来执行非静态方法中的静态方法。
You can also execute the static method in the non-static method. You need to use the class name as a reference to execute the static method in the non-static method.
Example: Static Method Execution in Non-Static Method
在下面的示例中，getSqrt() 是一个静态方法，而 printSqrt() 是一个常规类方法。在 printSqrt() 方法中，我们执行 getSqrt() 方法。
In the example below, getSqrt() is a static method, and printSqrt() is a regular class method. In the printSqrt() method, we execute the getSqrt() method.
我们使用 Num 类的实例来执行 printSqrt() 方法。
We used the instance of the Num class to execute the printSqrt() method.
<html>
<body>
<p id = "demo"> </p>
<script>
const output = document.getElementById("demo");
class Num {
static getSqr(a) {
return a * a;
}
printSqr(a) {
output.innerHTML += "The square of " + a + " is: " + Num.getSqr(a) + "<br>";
}
}
const num1 = new Num();
num1.printSqr(6);
</script>
</body>
</html>The square of 6 is: 36