JavaScript 类

2025年4月19日 | 阅读 6 分钟

概述

JavaScript 类是对象创建的蓝图。在 JavaScript 中，类是包含数据和操作数据的代码的模板。JavaScript 类有时被称为 ES6 添加的语法糖，用于更优雅地扩展对象属性和方法（以前通过原型和继承来完成）。

JavaScript 中类的概述

我们每天都在处理具有可比特性的数据或对象。例如，将姓名、班级和学号等信息输入到 100 张虚拟身份证上是一项任务。这说明了如何使用对象和类。基于原型的语言 JavaScript 通过使用隐藏的 [[Prototype]] 属性来扩展对象属性和方法。

类最初是在 JavaScript 中由 ES6 引入的，它提供了一种更简化的语法来起草可以扩展以构建对象的蓝图。注意：本教程不需要任何关于类或以前的 ES6 方法的先验知识。

JavaScript Class Syntax
class Classname {
    constructor() { ... }
}

语法定义

JavaScript 类使用 class 关键字创建。
类名出现在 Classname。它由用户决定。类名通常以大写字母开头。
使用 constructor() 函数初始化对象的属性。创建新类实例时会自动启动。（可以要求参数）。

在 JavaScript 中构建类

让我们为在教室里学习的学生建立一个类。这个类将包括每个学生的姓名、年龄和学号。

class Student{
    constructor(firstName, lastName, age, rollNo){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.rollNo = rollNo;
    }
}

JavaScript 关键字 "this" 在方法或构造函数中表示当前对象。它用于消除类属性和传递给构造函数的同名参数之间的歧义。

我们在上面的代码块中建立了一个名为 Student 的类（类名通常以大写字母开头）。Student 类中有四个属性：rollNo、age、lastName 和 firstName。四个参数被传递到构造函数，该函数将它们分配给类属性。

注意：应该注意的是，尽管上面示例中的构造函数参数和类属性名称相同，但它们并不相同。

用户在创建应用于类属性的对象时传递的值称为构造函数参数。

通常将构造函数参数和类属性写成相同的名称，但它们也可以有不同的名称。例如

class Student{
    constructor(firstNameInput, lastNameInput, ageInput, rollNoInput){
        firstName = firstNameInput;
        lastName = lastNameInput;
        age = ageInput;
        rollNo = rollNoInput;
    }
}

JavaScript 类类型

JavaScript 类是一种函数。下面的示例使用 'typeof' 运算符获取类的类型。如输出所示，它返回 "function"。

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

输出

constructor() 函数

当我们将它用作对象蓝图时，我们可以在函数体内初始化对象属性。同样，要初始化对象属性，我们必须在类中使用 constructor() 函数。

每次创建类实例时，都会自动调用 constructor() 函数。

在下面的示例中，我们使用 constructor() 函数构建了一个 Vehicle 类。

class Vehicle {
	constructor(brand) {// Here we need to Define the constructor
		this.brand = brand;
	}
}

可以使用 'constructor' 关键字来创建 constructor() 函数，该函数没有特定名称。可以使用 'this' 关键字在构造函数方法中初始化类属性。

JavaScript 中的对象创建

要创建 JavaScript 类的对象，我们需要类名、两个括号和一个 new 运算符。我们还可以向它传递参数。

我们将首先创建一个名为 myVehicle 的对象。

构造函数内部的 "this" 关键字表示执行当前函数的对象。

示例：创建没有参数的类对象

下面的示例定义了 'Vehicle' 类。在类中初始化了构造函数和属性的默认值。

如输出所示，然后生成了类实例。

<!DOCTYPE html>
<html>
<body>
	<p id = "result"> </p>
	<script>
		// creating Vehicle class
		class Vehicle {
			constructor() {
				this.type = "Car";
				this.brand = "Audi";
				this.cost = 1500000;
			}
		}
		// instantiate myVehicle object
		const myVehicle = new Vehicle();
		// display the properties
		document.getElementById("result").innerHTML = 
      "Vehicle type is : " + myVehicle.type + "<br>"
      +"Vehicle brand is : " + myVehicle.brand + "<br>"
      +"Vehicle cost is : " + myVehicle.cost + "<br>";
	</script>
</body>
</html>

输出

我们可以使用 constructor() 方法的参数来动态初始化类属性。

示例：使用参数构建类对象

下面的示例定义了 'Vehicle' 类。类中的 constructor() 函数接受四个参数，并使用它们通过参数值初始化类属性。

在创建 'Vehicle' 类实例时，传递了四个参数。这样我们就可以动态初始化类属性。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		class Vehicle {
			constructor(brand, model, price, year) {
				this.brand = brand;
				this.model = model;
				this.price = price;
				this.year = year;
			}
		}
		const vehicleObj = new Vehicle("TATA", "AW", 2000000, 2023);
		document.getElementById("output").innerHTML += 
		"Vehicle brand : " + vehicleObj.brand + "<br>"
		+ "Vehicle model : " + vehicleObj.model + "<br>"
		+ "Vehicle price : " + vehicleObj.price + "<br>"
		+ "Vehicle year : " + vehicleObj.year + "<br>"
	</script>
</body>
</html>

输出

JavaScript 类方法

此外，您还可以描述类中包含的、类实例可以访问的方法。

语法

要在类内部定义方法，请使用下面显示的语法。

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

在上述语法中，方法的动态名称为 'methodName'。我们不必在方法名称前添加 "function" 等关键字来定义类方法。

您必须使用类实例来调用类方法。在这种情况下，'obj' 是类的实例。您也可以向方法传递参数。

示例：下面的示例展示了如何向类方法传递参数。

我们在上面定义了 updateprice() 方法来更新汽车的价格。为了更改价格，我们调用 updateprice() 函数，并将更新后的价格作为参数传入，并在方法体中使用它。下面的输出显示了汽车的原始价格和更新后的价格。

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

			updateprice(newPrice) {
			this.price = newPrice;
			}
		}
    
		const myVehicle = new Vehicle("Audi", "XZ", 10000000, 2024);
		document.getElementById("result").innerHTML += 
		"The vehicle price is : " + myVehicle.price + "<br>";
    
		myVehicle.updateprice(15000000); // updating price
    
		document.getElementById("result").innerHTML += 
		"After updating the vehicle price is : " + myVehicle.price + "<br>";
	</script>
</body>
</html>

输出

JavaScript 类提升

JavaScript 中的类声明不会被提升到代码顶部。因此，在使用类之前，始终需要声明它。

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

尝试执行上述代码。考虑到 vehicle 类在使用前尚未初始化，它将产生一个引用错误。

基于类的严格模式

为了防止奇怪的错误，使用了严格模式。默认情况下，类代码始终处于严格模式。

为了帮助我们更好地理解，让我们看下面的例子。

class num {
	constructor() {
		number = 50; // Defining variable without var keyword
	}
}
const numberObj = new num();

在上面的代码的 constructor() 方法中，我们定义了全局变量 'number'。在 JavaScript 严格模式下，变量不能在不使用 var、let 或 const 关键字的情况下定义。因此，上面的代码将产生一个错误。

总结

JavaScript 类充当对象创建的蓝图。
JavaScript 类由方法和属性组成。
数据通过属性存储在 JavaScript 类中。
在 JavaScript 中，方法用于访问类的特性。
JavaScript 类中的 constructor() 方法用于初始化对象。
在 JavaScript 类声明中定义的物理项称为对象。
JavaScript 类使用 use-strict 协议声明其内部代码。

下一个主题Armstrong-number-in-javascript

JavaScript 类

概述

JavaScript 中类的概述

语法定义

在 JavaScript 中构建类

注意：应该注意的是，尽管上面示例中的构造函数参数和类属性名称相同，但它们并不相同。

JavaScript 类类型

constructor() 函数

JavaScript 中的对象创建

示例：创建没有参数的类对象

示例：使用参数构建类对象

JavaScript 类方法

示例：下面的示例展示了如何向类方法传递参数。

JavaScript 类提升

基于类的严格模式

总结

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 类

概述

JavaScript 中类的概述

语法定义

在 JavaScript 中构建类

注意：应该注意的是，尽管上面示例中的构造函数参数和类属性名称相同，但它们并不相同。

JavaScript 类类型

constructor() 函数

JavaScript 中的对象创建

示例：创建没有参数的类对象

示例：使用参数构建类对象

JavaScript 类方法

示例：下面的示例展示了如何向类方法传递参数。

JavaScript 类提升

基于类的严格模式

总结

相关帖子

ClearTimeOut 在 JavaScript 中的用法

JavaScript Return 命令