JS中的class关键字怎么用？和构造函数有什么区别？

JavaScript中的class是ES6引入的语法糖，本质仍基于原型继承，用于更清晰地定义对象模板。其核心用法包括通过class关键字定义类、constructor初始化属性、直接在类体中编写方法，并通过new创建实例。与构造函数相比，class在写法、变量提升、调用方式及方法枚举性上有显著区别，同时支持静态方法、继承、getter/setter等特性。

1. 定义类使用class关键字，内部通过constructor初始化属性，方法直接写在类体中困拦：

   class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`你好，我是${this.name}`); }}

2. 创建实例通过new调用类，与构造函数一致：

   const p1 = new Person('小明', 20);p1.sayHello(); // 输出：你好，我是小明

1. 写法不同

   构造函数：需手动通过prototype添加方法，结构较松散。function Person(name, age) { this.name = name; this.age = age;}Person.prototype.sayHello = function() { console.log(`你好，我是${this.name}`);};

   class：方法直接写在类体中，结构更清晰。

2. 变量提升（Hoisting）

   构造函数：函数声明会提升，可先调用后定义。

   class：类定义不会提升，必须先定义再使用，否则报错（ReferenceError）。

3. 调用方式

   构造函数：可用普通函数方式调用（不推荐），但不会创建实例。Person('小明', 20); // 无报错，但未创建实例

   class：必须用new调用，直接调用会报错（Class constructor cannot be invoked without 'new'）。

4. 方法枚举性

   构造函数：通过prototype添加的方法默认可枚举（enumerable: true）。

   class：类中定义的方法默认不可枚举（enumerable: false），更符合面向对象的设计规范。

1. 静态方法（static）静态方法属于类本身，而非实例，通过类名直接调用：

   class Person { static info() { console.log('这是一个Person类'); }}Person.info(); // 正确new Person().info(); // 报错：未定义

2. 继承（extends与super）子类通过extends继承父类，并用super()调用父类构造函数：

   class Student extends Person { constructor(name, age, grade) { super(name, age); // 调用父类构造函数 this.grade = grade; }}

3. Getter/Setter定义属性的获取和设置逻辑，增强数据控制：

   class Person { constructor(firstName, lastName) { this._firstName = firstName; this._lastName = lastName; } get fullName() { return `${this._firstName} ${this._lastName}`; } set fullName(value) { const parts = value.split(' '); this._firstName = parts[0]; this._lastName = parts[1]; }}

1. 推荐使用class的场景

   现代代码开发，追求结构清晰和可读性。

   需要使用继承、静态方法等高级特性。

   框架开发（如React类孙尺察组件、Vue 2的选项式API）。

2. 推荐使用构造函数的场景

   维护旧项目或兼容老旧浏览器（如IE）。

   无需继承或则茄复杂特性，追求简单直接的实现。

• class是ES6的语法糖，本质仍是原型继承，但写法更接近传统面向对象语言，支持静态方法、继承等特性，适合现代开发。
• 构造函数通过prototype手动添加方法，结构松散，但兼容性更好，适合旧项目维护。
• 理解class背后的原型机制，有助于深入掌握JavaScript的面向对象设计。