JS中的class用法详解：class与构造函数的区别

本文深入解析了 JavaScript 中 `class` 关键字的用法及其与传统构造函数的区别。`class` 作为 ES6 引入的语法糖，旨在提供更清晰、简洁的对象模板定义方式，其底层仍基于原型继承。文章详细讲解了如何使用 `class` 定义类、创建实例，并对比了 `class` 在写法、变量提升、调用方式和方法枚举性等方面与构造函数的差异。此外，还介绍了 `class` 的常用特性，如静态方法、继承（`extends` 和 `super`）以及 `getter/setter`。最后，文章建议在现代代码或需要继承时优先使用 `class`，而在维护旧项目或兼容老旧浏览器时则可考虑使用构造函数。掌握 `class` 的本质，有助于更深入地理解 JavaScript 的原型机制。

JavaScript 中的 class 是 ES6 引入的语法糖，用于更清晰地定义对象模板，其本质仍基于原型继承。1. 定义类使用 class 关键字，内部通过 constructor 初始化属性，方法直接写在类体中；2. 创建实例需用 new 调用；3. class 与构造函数的区别包括：写法不同、不存在变量提升、必须用 new 调用、类中方法不可枚举；4. class 常用特性包括静态方法（static）、继承（extends 和 super）、getter/setter；5. 推荐在现代代码或需要继承时使用 class，而在维护旧项目或兼容老旧浏览器时使用构造函数。

在 JavaScript 中，class 关键字是 ES6 引入的一种语法糖，用来更清晰、更简洁地定义对象的模板。它本质上还是基于原型（prototype）的继承机制，只是写法上更接近传统面向对象语言。

class 是怎么用的？

定义一个类的基本方式如下：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`你好，我是${this.name}`);
  }
}

使用这个类创建实例就和构造函数一样：

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

可以看出，class 的写法比传统的构造函数更直观，方法直接写在类里，不需要手动操作 prototype。

class 和构造函数有什么区别？

虽然它们最终实现的功能是一样的，但有几个关键点需要注意：

• 写法不同
  构造函数通常是一个函数，方法要通过 prototype 添加；而 class 更结构化，方法直接写在类体中。

• 不存在变量提升（hoisting）
  使用 class 定义的类不会被提升，必须先定义再使用，否则会报错（ReferenceError）。构造函数则可以先调用后定义。

• 必须用 new 调用
  class 只能通过 new 创建实例，直接调用会报错。构造函数可以用普通函数方式调用（虽然不推荐）。

• 类中的方法不可枚举
  类中定义的方法默认是不可枚举的（enumerable 为 false），而构造函数通过 prototype 添加的方法是可枚举的。

class 还有哪些常用特性？

除了基本用法，class 还支持一些更实用的特性：

1. 静态方法（static）

静态方法属于类本身，而不是实例：

class Person {
  static info() {
    console.log('这是一个Person类');
  }
}

Person.info(); // 正确
// new Person().info(); // 报错

2. 继承（extends 和 super）

class 支持使用 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];
  }
}

什么时候该用 class？什么时候用构造函数？

• 如果你写的代码偏向现代风格、需要继承、或者希望结构清晰，建议使用 class。
• 如果你在维护旧项目、或者需要兼容老旧浏览器（比如 IE），可能还需要用构造函数 + prototype 的方式。
• 在大多数现代框架（如 React、Vue 的组合式 API 出现前）中，class 曾是组织组件逻辑的主要方式。

基本上就这些了。class 看起来简单，但背后还是原型那一套机制，理解这一点对深入掌握 JS 很有帮助。

今天关于《JS中的class用法详解：class与构造函数的区别》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！