Javascript 简明教程
JavaScript - Static Methods
What are Static Methods?
JavaScript 中的 static method 使用 static 关键字后跟方法名称定义。你可以通过引用类名而不是类的实例来执行静态方法。
静态方法的主要优点是可以用来创建不需要类的实例即可执行的 utility 函数。例如， Math 对象包含各种 static methods ，我们可以通过 Math 类直接调用它。
此外，可以使用静态方法将所有相关方法添加到一个命名空间中。此外，由于内存优化，静态方法比常规类方法具有更好的性能。
在以下语法中，我们在名为 Table 的类中定义了一个名为 getSize() 的静态方法 −
class Table {
static getSize() { // Static method
return "10 x 10";
}
}
Table.getSize(); // Static method invocation在上面的语法中，getSize() 是一个静态方法。我们使用类名来执行 getSize() 方法。
Examples
让我们借助一些不同用例示例来了解 JavaScript 静态方法
Example: Static Method
在下面的示例中，printSize() 是一个静态方法，而 getSize() 是 table 类中的一个常规方法。你可以看到 printSize() 方法是使用 table 类名调用的，而 getSize() 方法是使用类实例执行的。
因此，该类可以同时包含静态和非静态方法。
<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单个类还可以包含多个静态方法。
Example: Multiple Static Methods
在下面的代码中，table 类包含 printSize() 和 getSize() 静态方法。这两个方法都是通过取类名作为引用来执行的。
<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单个类可以包含多个具有相同名称的静态方法。当你执行具有相同名称的静态方法时，它将执行最后一个方法。
Example: Static Methods with the Same Name
在下面的示例中，table 类包含重复的 printSize() 方法。在输出中，你可以观察到代码执行了第二个 printSize() 方法。
<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，后跟构造函数关键词，再跟静态方法名称来执行构造函数中的静态方法。
Example: Static Method Execution in the Constructor
在下面的示例中，Num 类包含 getSqrt() 静态方法。我们在构造函数中执行了 getSqrt() 方法。
每当你创建一个 Num 类的新的对象时，它将把该数字的平方根存储在该类的“sqrt”属性中。
<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你也可以在非静态方法中执行静态方法。你需要使用类名作为引用来执行非静态方法中的静态方法。
Example: Static Method Execution in Non-Static Method
在下面的示例中，getSqrt() 是一个静态方法，而 printSqrt() 是一个常规类方法。在 printSqrt() 方法中，我们执行 getSqrt() 方法。
我们使用 Num 类的实例来执行 printSqrt() 方法。
<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