JavaScript - 类(Classes)

JavaScript 类(Classes)

JavaScript 类(Classes)是用于创建对象的蓝图或模板。它们封装数据并函数来操作该数据。我们可以使用 classes 创建对象。从类创建对象称为实例化类。在 JavaScript 中，类是建立在原型之上的。这些类在 2009 年的 ECMAScript 6 （ES6）中被引入 JavaScript。

例如，您可以考虑编写代码来表示 car 实体。代码可以包含具有 car 属性的类。对于不同的汽车，您可以创建类的实例，并根据汽车型号初始化汽车属性。

在 ES6 之前，构造函数用于定义对象的蓝图。您可以定义 constructor 函数，如下所示。

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

定义 JavaScript 类

该类的语法与 constructor 函数非常相似，但它使用 'class' 关键字来定义类。由于我们可以使用函数声明或函数表达式来定义函数，因此也可以使用类声明或类表达式来定义类。

语法

JavaScript 中类定义的语法如下 -

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

'ClassName' 是上述语法中的类名。

JavaScript 类(Class)是一个函数，但您不能将其用作常规函数。

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' 关键字创建。您可以在 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' 是类的实例。您还可以将参数传递给该方法。

例

下面的示例演示了如何将参数传递给类 methods。

在这里，我们定义了 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