当前位置：首页 > 文章列表 > 文章 > 前端 > Class与构造函数区别解析

Class与构造函数区别解析

2025-12-05 14:02:06 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《Class 与构造函数对比详解》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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

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

在 JavaScript 中，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）
不会被提升，必须先定义再使用

构造函数：JavaScript 原型机制的基础

在 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

构造函数的特点包括：

本质是一个普通函数，通过 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.`);
  }
}