JavaScript - 静态方法

什么是静态方法?

JavaScript 中的静态方法使用 static 关键字加上方法名称来定义。您可以通过将类名作为引用(而不是类的实例)来执行静态方法。

静态方法的主要优点是它可以用于创建实用函数，而无需类的实例即可执行。例如，Math 对象包含各种静态方法，我们可以直接通过 Math 类调用这些方法。

此外，您还可以使用静态方法将所有相关方法添加到单个命名空间下。此外，由于内存优化，静态方法比常规类方法具有更好的性能。

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

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

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

示例

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

示例:静态方法

在下面的示例中，printSize() 是一个静态方法，而 getSize() 是表类中的常规方法。您可以看到，printSize() 方法是使用表类名调用的，而 getSize() 方法是使用类实例执行的。

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(); // 静态方法执行
		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

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

示例:多个静态方法

在下面的代码中，表类包含 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

一个类可以包含多个同名的静态方法。执行同名的静态方法时，将执行最后一个方法。

示例:同名的静态方法

在下面的示例中，表类包含重复的 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(); // 静态方法执行
	</script>
</body>
</html>

输出

The size of the table is: 30 x 30

您还可以在构造函数中执行类的静态方法。您可以使用此关键字，后跟构造函数关键字，再跟静态方法名称，在构造函数中执行静态方法。

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

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

每当您创建 Num 类的新对象时，它都会将数字的平方根存储在该类的"sqrt"属性中。

<html>
<body>
	<p id = "output">The square root of the 10 is: </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>

输出

The square root of the 10 is: 100

您也可以在非静态方法中执行静态方法。您需要使用类名作为引用才能在非静态方法中执行静态方法。

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

在下面的示例中，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