JavaScript - Static（静态）方法

什么是 Static（静态）方法？

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

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

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

在下面的语法中，我们在名为 Table 的类中定义了一个名为 getSize（） 的 static 方法 -


class Table {
		 	static getSize() { // Static method
		 			 	return "10 x 10";
		 	}
}
Table.getSize(); // Static method invocation

在上面的语法中，getSize（） 是一个 static 方法。我们使用类名来执行 getSize（） 方法。

例子

让我们借助一些不同用例的示例来了解 JavaScript static 方法 -

示例：Static 方法

在下面的示例中，printSize（）是 static 方法，getSize（）是 table 类中的常规方法。你可以看到 printSize（）方法是使用表类名调用的，而 getSize（）方法是使用类实例执行的。

因此，该类可以包含 static 和非 static。


<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

单个类还可以包含多个 static 方法。

示例：多个 static 方法

在下面的代码中，table 类包含 printSize（）和 getSize（） static 方法。这两种方法都是通过以类名作为引用来执行的。


<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

单个类可以包含多个同名的 static 方法。当您执行具有相同名称的 static 方法时，它将执行最后一个方法。

示例：具有相同名称的 static 方法

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

您还可以在构造函数中执行类的 static 方法。您可以使用 this 关键字后跟 constructor 关键字，后跟 static 方法名称，以在构造函数中执行 static 方法。

示例：构造函数中的 static 方法执行

在下面的示例中，Num 类包含 getSqrt（） static 方法。我们已经在构造函数中执行了 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

您还可以在非 static 方法中执行 static 方法。您需要使用类名作为引用，才能在非 static 方法中执行 static 方法。

示例：在非 static 方法中执行 static 方法

在下面的示例中，getSqrt（） 是一个 static 方法，而 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

本页