J*aScript 类语法：Class 关键字与构造函数的对比

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 类语法：Class 关键字与构造函数的对比

2025-10-30

浏览次数：次

返回列表

class是语法糖，基于构造函数与原型链，提供更清晰的OOP语法；构造函数为底层实现，需手动管理原型。前者推荐现代开发使用，后者助于理解机制与维护旧代码。

javascript 类语法：class 关键字与构造函数的对比

在 J*aScript 中，class 关键字和构造函数都能实现面向对象编程中的类机制。虽然 class 看起来像传统面向对象语言的语法，但它本质上是基于原型的构造函数的语法糖。理解两者之间的异同，有助于写出更清晰、可维护的代码。

class 关键字：更清晰的语法结构

ES6 引入了 class 语法，让定义“类”变得更直观。它封装了构造函数、方法定义和继承逻辑，使代码更具可读性。

使用 class 定义一个类：

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

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const p = new Person("Alice");
p.greet(); // 输出: Hello, I'm Alice

class 的优势在于：

语法更接近传统 OOP，易于理解和学习
方法之间无需逗号，结构清晰
内置支持 static 方法、getter/setter 和继承（extends）
不会被提升，必须先定义再使用

构造函数：J*aScript 原型机制的基础

在 ES6 之前，开发者通过构造函数和原型链来模拟类的行为。这是 class 背后的底层实现机制。

等效的构造函数写法：

function Person(name) {
this.name = name;
}

Person.prototype.greet = function() {
console.log(`Hello, I'm ${this.name}`);
};

const p = new Person("Bob");
p.greet(); // 输出: Hello, I'm Bob

构造函数的特点包括：

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

本质是一个普通函数，通过 new 调用时初始化实例
需要手动操作 prototype 属性来添加共享方法
容易出错，比如忘记 new 会导致 this 指向全局对象
继承逻辑复杂，需手动处理原型链

核心差异与注意事项

尽管 class 最终会编译为基于原型的构造函数，但两者在行为上仍有细微差别。

class 必须通过 new 调用，直接执行会报错；构造函数在非严格模式下可以被普通调用
class 声明不会被提升，必须先定义后使用；函数声明则会被提升
class 内部默认启用严格模式
class 更容易实现继承：extends 和 super() 简化了子类创建

例如，使用 extends 实现继承：

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}