JavaScript - 類

上一頁
下一頁

JavaScript 類

JavaScript 的類是建立物件的藍圖或模板。它們封裝了資料和操作該資料的功能。我們可以使用類來建立物件。從類建立物件被稱為例項化類。在 JavaScript 中，類是基於原型的。類於 2009 年在 ECMAScript 6 (ES6) 中引入 JavaScript。

例如，您可以考慮編寫程式碼來表示汽車實體。程式碼可以包含具有汽車屬性的類。對於不同的汽車，您可以建立類的例項並根據汽車型號初始化汽車屬性。

在 ES6 之前，建構函式用於定義物件的藍圖。您可以按如下所示定義建構函式。

function Car(brand) { // Constructor function
	this.brand = brand; // property initialization
}
const carObj = new Car("Audi"); // Creating an object

定義 JavaScript 類

類的語法與建構函式非常相似，但它使用“class”關鍵字來定義類。正如我們可以使用函式宣告或函式表示式來定義函式一樣，類也可以使用類宣告或類表示式來定義。

語法

JavaScript 中類定義的語法如下：

// class declaration
class ClassName {
   // Class body
}
//Class expression
const ClassName = class {
   // class body
}

在上面的語法中，“ClassName”是類名。

JavaScript 類是一個函式，但不能將其用作常規函式。

JavaScript 類的型別

JavaScript 類是一種函式。在下面的示例中，我們使用“typeof”運算子來獲取類的型別。它返回“function”，您可以在輸出中觀察到。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> The type of the car class is: </p>
	<script>
		class Car {
			// Class body
		}
		document.getElementById("output").innerHTML += typeof Car;
	</script>
</body>
</html>

輸出

The type of the car class is: function

constructor() 方法

當您將函式用作物件藍圖時，可以在函式體中初始化物件屬性。類似地，您需要將constructor()方法與類一起使用以初始化物件屬性。

每當您建立類的例項時，它都會自動呼叫類的constructor()方法。

在下面的示例中，我們使用 constructor() 方法建立一個Car 類：

class Car {
	constructor(brand) {// Defining the constructor
		this.brand = brand;
	}
}

constructor() 方法沒有特定的名稱，但可以使用“constructor”關鍵字建立。您可以使用建構函式內的“this”關鍵字初始化類屬性。

建立 JavaScript 物件

要建立 JavaScript 類的物件，我們使用new運算子，後跟類名和一對括號。我們也可以向其傳遞引數。

讓我們建立一個名為myCar的物件，如下所示：

const myCar = new Car("Audi");

建構函式內的this關鍵字是指正在執行當前函式的物件。

示例：建立無引數的類物件

在下面的示例中，我們定義了“Car”類。該類包含建構函式並使用預設值初始化屬性。

之後，我們建立了類的例項，您可以在輸出中觀察到它。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		// creating Car class
		class Car {
			constructor() {
				this.brand = "BMW";
				this.model = "X5";
				this.year = 2019;
			}
		}
		// instantiate myCar object
		const myCar = new Car();
		// display the properties
		document.getElementById("output").innerHTML = 
      "Car brand is : " + myCar.brand + "<br>"
      +"Car model is : " + myCar.model + "<br>"
      +"Car year is : " + myCar.year + "<br>";
	</script>
</body>
</html>

輸出

Car brand is : BMW
Car model is : X5
Car year is : 2019

如果要動態初始化類屬性，可以使用帶constructor()方法的引數。

示例：建立帶引數的類物件

在下面的示例中，我們定義了“Car”類。該類的 constructor() 方法採用 4 個引數，並使用引數值初始化類屬性。

建立“Car”類例項時，我們傳遞了 4 個引數。透過這種方式，您可以動態初始化類屬性。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		class Car {
			constructor(brand, model, price, year) {
				this.brand = brand;
				this.model = model;
				this.price = price;
				this.year = year;
			}
		}
		const carObj = new Car("BMW", "X5", 9800000, 2019);
		document.getElementById("output").innerHTML += 
		"Car brand : " + carObj.brand + "<br>"
		+ "Car model : " + carObj.model + "<br>"
		+ "Car price : " + carObj.price + "<br>"
		+ "Car year : " + carObj.year + "<br>"
	</script>
</body>
</html>

輸出

Car brand : BMW
Car model : X5
Car price : 9800000
Car year : 2019

JavaScript 類方法

您還可以在類中定義方法，可以使用類例項訪問這些方法。

語法

請按照以下語法在類中定義方法。

class car {
   methodName(params) {
		// Method body
	}
}
obj.methodName();

在上面的語法中，“methodName”是方法的動態名稱。要定義類方法，您無需在方法名前寫任何關鍵字，例如“function”。

要呼叫類方法，您需要使用類的例項。這裡，“obj”是類的例項。您也可以向方法傳遞引數。

示例

下面的例子演示瞭如何向類方法傳遞引數。

這裡，我們定義了updateprice()方法來更新汽車的價格。因此，在呼叫updateprice()方法時，我們將新價格作為引數傳遞，並在方法體內部使用它來更新價格。

您可以在輸出中看到汽車的原始價格和更新後的價格。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		class Car {
			constructor(brand, model, price, year) {
				this.brand = brand;
				this.model = model;
				this.price = price;
				this.year = year;
			}

			updateprice(newPrice) {
			this.price = newPrice;
			}
		}
    
		const myCar = new Car("BMW", "X5", 9800000, 2019);
		document.getElementById("output").innerHTML += 
		"The car price is : " + myCar.price + "<br>";
    
		myCar.updateprice(8800000); // updating price
    
		document.getElementById("output").innerHTML += 
		"After updating the car price is : " + myCar.price + "<br>";
    
	</script>
</body>
</html>

輸出

The car price is : 9800000
After updating the car price is : 8800000

JavaScript 類提升

在 JavaScript 中，類的宣告不會提升到程式碼的頂部。因此，您始終需要在使用類之前定義它。

const carObj = new Car(); // This will generate an error.
class Car {
}

您可以嘗試執行上面的程式碼。它會生成一個引用錯誤，因為 car 類在其初始化之前就被使用了。

類中的嚴格模式

嚴格模式用於避免異常錯誤。類程式碼預設始終處於嚴格模式。

讓我們透過下面的例子來理解它。

class numbers {
	constructor() {
		num = 90; // Defining variable without var keyword
	}
}
const numObj = new numbers();

在上面的程式碼中，我們在 constructor() 方法中定義了全域性變數 'num'。在 JavaScript 的嚴格模式下，不允許在不使用 var、let 或 const 關鍵字的情況下定義變數。因此，上面的程式碼會丟擲錯誤。

列印頁面
上一頁
下一頁
廣告