JavaScript 静态方法

上一章下一章

在 JavaScript 中，静态方法是使用 static 关键字后跟方法名定义的。您可以使用类名而不是类的实例来执行静态方法。

静态方法的主要好处是可以用来创建不需要类实例即可执行的工具函数。例如，Math 对象包含各种静态方法，我们可以通过 Math 类直接调用它们。

此外，您还可以使用静态方法将所有相关的方法放在一个命名空间下。而且由于内存优化，静态方法比常规类方法提供了更好的性能。

在下面的语法中，我们在名为 Table 的类中定义了一个名为 getSize() 的静态方法：

class Table {
 static getSize() { // 静态方法
  return "10 x 10";
 }
}
Table.getSize(); // 静态方法调用

在上述语法中，getSize() 是一个静态方法。我们使用类名来执行 getSize() 方法。

示例

让我们通过一些示例来理解 JavaScript 中静态方法的不同用例：

示例：静态方法

在下面的例子中，printSize() 是一个静态方法，而 getSize() 是 table 类中的常规方法。可以看出 printSize() 方法是通过 table 类名调用的，而 getSize() 方法则是通过类的实例来执行的。

所以，类可以包含静态和非静态的方法。

<html>
<body>
 <p id="demo"> </p>
 <script>
  const output = document.getElementById("demo");

  class Table {
   static printSize() {
    return "桌子的尺寸是: 20 x 20 <br>";
   }

   getColor() {
    return "黑色";
   }
  }

  output.innerHTML = Table.printSize(); // 静态方法执行
  const tableObj = new Table();
  output.innerHTML += "桌子的颜色是: " + tableObj.getColor();
 </script>
</body>
</html>

输出：

桌子的尺寸是: 20 x 20
桌子的颜色是: 黑色

一个单一的类也可以包含多个静态方法。

示例：多个静态方法

在下面的代码中，table 类包含了 printSize() 和 getColor() 静态方法。这两种方法都是通过类名来调用的。

<html>
<body>
 <p id="output"> </p>
 <script>
  class Table {
   static printSize() {
    return "桌子的尺寸是 20 x 20 <br>";
   }

   static getColor() {
    return "桌子的颜色是粉红色";
   }
  }

  document.getElementById("output").innerHTML = 
  Table.printSize() + "br" +
  Table.getColor();
 </script>
</body>
</html>

输出：

桌子的尺寸是 20 x 20
br桌子的颜色是粉红色

一个单一的类可以包含同名的多个静态方法。当您执行同名的静态方法时，它会执行最后一个方法。

示例：同名的静态方法

在下面的例子中，table 类包含了重复的 printSize() 方法。在输出中，可以看到代码执行了第二个 printSize() 方法。

<html>
<body>
 <p id="output"> </p>
 <script>
  class Table {
   static printSize() {
    return "桌子的尺寸是: 20 x 20 <br>";
   }

   static printSize() {
    return "桌子的尺寸是: 30 x 30 <br>";
   }
  }
  document.getElementById("output").innerHTML = Table.printSize(); // 静态方法执行
 </script>
</body>
</html>

输出：

桌子的尺寸是: 30 x 30

您也可以在构造函数中执行类的静态方法。您可以使用 this 关键字后跟构造函数关键字再后跟静态方法名来在构造函数中执行静态方法。

示例：在构造函数中执行静态方法

在下面的例子中，Num 类包含了 getSqrt() 静态方法。我们在构造函数中执行了 getSqrt() 方法。

每当您创建 Num 类的新对象时，它将会把数字的平方根存入类的 sqrt 属性中。

<html>
<body>
 <p id="output">10 的平方根是: </p>
 <script>
  class Num {
   constructor(a) {
    // 静态方法执行
    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>

输出：

10 的平方根是: 100

您也可以在非静态方法中执行静态方法。您需要使用类名作为参考来在非静态方法中执行静态方法。

示例：在非静态方法中执行静态方法

在下面的例子中，getSqr() 是一个静态方法，而 printSqr() 是一个常规的类方法。在 printSqr() 方法中，我们执行了 getSqr() 方法。

我们使用 Num 类的实例来执行 printSqr() 方法。

<html>
<body>
 <p id="demo"> </p>
 <script>
  const output = document.getElementById("demo");
  class Num {
   static getSqr(a) {
    return a * a;
   }

   printSqr(a) {
    output.innerHTML += "数字 " + a + " 的平方是: " + Num.getSqr(a) + "<br>";
   }
  }
  const num1 = new Num();
  num1.printSqr(6);
 </script>
</body>
</html>

输出：

数字 6 的平方是: 36

上一章下一章