笙亿网络策划

JavaScript Classes怎么用？类定义、继承和实例化详解

约 11 分钟读完 0 阅
文章导读
上一个 测验 下一个 JavaScript 类 JavaScript class 是创建对象的蓝图或模板。它们封装了数据以及操作这些数据的方法。我们可以使用 class 来创建对象。从 class 创建对象被称为实例化 class。在 JavaScript 中，class
📋 目录
  1. A JavaScript 类
  2. B 定义 JavaScript 类
  3. C JavaScript 类的类型
  4. D constructor() 方法
  5. E 创建 JavaScript 对象
  6. F JavaScript 类方法
  7. G JavaScript 类提升
  8. H 类中的严格模式
A A

JavaScript - 类

上一个
测验
下一个

JavaScript 类

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

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

在 ES6 之前，使用构造函数函数来定义对象的蓝图。你可以如下定义构造函数函数。

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

定义 JavaScript 类

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

语法

JavaScript 中 class 定义的语法如下 −

// class 声明
class ClassName {
   // Class body
}
// Class 表达式
const ClassName = class {
   // class body
}

上面的语法中 'ClassName' 是 class 名称。

JavaScript class 是一种 function，但你不能像普通函数那样使用它。

JavaScript 类的类型

JavaScript class 是一种 function。在下面的示例中，我们使用 'typeof' 操作符来获取 class 的类型。它返回 'function'，你可以在输出中观察到。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> 汽车 class 的类型是： </p>
	<script>
		class Car {
			// Class body
		}
		document.getElementById("output").innerHTML += typeof Car;
	</script>
</body>
</html>

输出

汽车 class 的类型是： function

constructor() 方法

当你将函数用作对象蓝图时，你可以在函数体内部初始化对象属性。同样，你需要使用 class 中的 constructor() 方法来初始化对象属性。

每当你创建 class 的实例时，它会自动调用 class 的 constructor() 方法。

在下面的示例中，我们使用 constructor() 方法创建一个 Car class −

class Car {
	constructor(brand) {// 定义构造函数
		this.brand = brand;
	}
}

constructor() 方法没有特定的名称，但可以使用 'constructor' 关键字创建。你可以在构造函数内部使用 'this' 关键字来初始化 class 属性。

创建 JavaScript 对象

要创建 JavaScript class 的对象，我们使用 new 运算符，后跟 class 名称和一对括号。我们也可以向它传递参数。

让我们创建一个名为 myCar 的对象，如下所示 −

const myCar = new Car("Audi");

构造函数中的 this 关键字引用正在执行当前函数的对象。

示例：无参数创建 class 对象

在下面的示例中，我们定义了 'Car' class。该 class 包含 constructor，并使用默认值初始化属性。

之后，我们创建了该 class 的实例，你可以在输出中观察到。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		// 创建 Car class
		class Car {
			constructor() {
				this.brand = "BMW";
				this.model = "X5";
				this.year = 2019;
			}
		}
		// 实例化 myCar 对象
		const myCar = new Car();
		// 显示属性
		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

如果要动态初始化 class 属性，可以在 constructor() 方法中使用参数。

示例：带参数创建 class 对象

在下面的示例中，我们定义了 'Car' class。该 class 的 constructor() 方法接受 4 个参数，并使用参数值初始化 class 属性。

在创建 'Car' class 实例时，我们传递了 4 个参数。通过 this 方式，你可以动态初始化 class 属性。

<!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) {
		// 方法体
	}
}
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); // 更新价格
    
		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 关键字定义变量。因此，上述代码将抛出错误。