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 关键字的情况下定义变量。因此，上面的代码会抛出错误。

打印页面