JavaScript - 类

JavaScript 类

JavaScript 类是对象创建的蓝图或模板。它们封装了数据以及操作数据的函数。我们可以使用类来创建对象。从类创建对象称为实例化类。在 JavaScript 中，类是基于原型构建的。类于 2009 年在 ECMAScript 6 (ES6) 中被引入 JavaScript。

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

在 ES6 之前，构造函数用于定义对象的蓝图。您可以像下面这样定义构造函数。

function Car(brand) { // 构造函数
    this.brand = brand; // 属性初始化
}
const carObj = new Car("Audi"); // 创建对象

定义 JavaScript 类

类的语法与构造函数非常相似，但它使用"class"关键字来定义类。正如我们可以使用函数声明或函数表达式来定义函数一样，类也可以使用类声明或类表达式来定义。

语法

JavaScript 中类定义的语法如下:

// 类声明
class ClassName {
   // Class body
}
//Class expression
const ClassName = class {
   // class body
}

在上述语法中，"ClassName"表示类名。

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

JavaScript 类的类型

JavaScript 类是一种函数的类型。在下面的示例中，我们使用了"typeof"运算符来获取类的类型。它返回"函数"，您可以在输出中看到它。

<!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) {// 定义构造函数
		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(); // 这将生成错误。
class Car {
}

您可以尝试运行上述代码。由于在初始化之前使用了 car 类，因此将生成引用错误。

类的严格模式

严格模式用于避免异常错误。默认情况下，类代码始终处于严格模式。

让我们通过下面的示例来理解它。

class numbers {
	constructor() {
		num = 90; // 不使用 var 关键字定义变量
	}
}
const numObj = new numbers();

在上面的代码中，我们在constructor()方法中定义了全局变量"num"。在JavaScript的严格模式下，不允许不使用var、let或const关键字来定义变量。因此，上面的代码会抛出错误。