JavaScript - 靜態方法

什麼是靜態方法？

JavaScript 中的靜態方法使用static關鍵字後跟方法名來定義。您可以透過將類名作為引用而不是類的例項來執行靜態方法。

靜態方法的主要好處是它可以用來建立一個實用程式函式，該函式不需要類的例項即可執行。例如，Math物件包含各種靜態方法，我們可以直接透過Math類呼叫它們。

此外，您可以使用靜態方法將所有相關方法新增到單個名稱空間下。此外，由於記憶體最佳化，靜態方法比常規類方法具有更好的效能。

在以下語法中，我們在名為Table的類中定義了一個名為getSize()的靜態方法：

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

在上面的語法中，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 "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

單個類還可以包含多個靜態方法。

示例：多個靜態方法

在下面的程式碼中，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

單個類可以包含多個同名的靜態方法。當您執行同名的靜態方法時，它將執行最後一個方法。

示例：同名靜態方法

在下面的示例中，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關鍵字後跟建構函式關鍵字後跟靜態方法名來在建構函式中執行靜態方法。

示例：在建構函式中執行靜態方法

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

你也可以在非靜態方法中執行靜態方法。你需要使用類名作為引用，才能在非靜態方法中執行靜態方法。

示例：在非靜態方法中執行靜態方法

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

列印頁面