长治市网站建设_网站建设公司_自助建站_seo优化

搞懂 ES6 的class和继承：从写代码的“土办法”到优雅编程

你有没有过这样的经历？在早期写 JavaScript 时，想做个“人”这个对象，结果只能靠函数模拟：

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

看着像那么回事，但总觉得别扭——明明是面向对象的思想，语法却像是拼凑出来的。更头疼的是，一旦要搞个学生、老师这些子类，就得手动操作原型链，一不小心就出错。

直到 ES6 出现了class关键字，一切都变了。

为什么我们需要class？

随着前端项目越来越复杂，单靠对象字面量和函数已经撑不住了。React、Vue 这些框架开始流行组件化开发，我们迫切需要一种更清晰、更有组织性的方式来管理代码逻辑。

ES6 的class就是在这种背景下诞生的。它不是新发明了一套继承机制，而是给老的原型继承穿上了一件漂亮的新外衣——也就是常说的“语法糖”。但它这件衣服穿得太好看了，以至于很多人以为 JavaScript 突然变成了 Java 那样的语言。

其实不然。class只是让原本晦涩难懂的原型操作变得直观易读了。

class到底怎么用？一个例子讲明白

来看一个最简单的例子：

class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, I'm ${this.name}`); } static info() { console.log('This is a Person class'); } }

这段代码做了三件事：
-构造函数constructor：创建实例时自动执行，用来初始化属性；
-实例方法sayHello()：每个由new Person()创建的对象都能调用；
-静态方法info()：属于类本身，不归实例所有，直接通过Person.info()调用。

使用起来也很简单：

const p = new Person("Alice", 30); p.sayHello(); // 输出: Hello, I'm Alice Person.info(); // 输出: This is a Person class

注意：你不能直接调用Person()，必须用new，否则会报错。这是强制规范，防止误用。

class背后还是原型链，只是你看不见

虽然写法看起来像 Java 或 C++，但底层依然是 JavaScript 原有的那一套——基于原型（prototype-based）的对象系统。

当你写下class Person，JavaScript 实际上做了这些事：

1. 把Person当作一个函数（构造器）；
2. 把所有实例方法（如sayHello）挂到Person.prototype上；
3. 静态方法则直接挂在Person函数上；
4. 用new实例化时，执行constructor，并把this绑定到新对象。

所以，下面这行代码依然成立：

p.__proto__ === Person.prototype; // true

也就是说，方法查找还是走原型链的老路子。class只是帮你省去了手动写Person.prototype.sayHello = ...的麻烦。

让数据更安全：getter 和 setter

有时候你不希望别人随意修改某些属性，比如银行账户余额。这时候可以用get和set来控制访问。

class BankAccount { constructor(initialBalance = 0) { this._balance = initialBalance; // _ 表示“私有”约定 } get balance() { return this._balance; } set balance(amount) { if (amount < 0) throw new Error("Balance cannot be negative"); this._balance = amount; } deposit(money) { this.balance += money; } withdraw(money) { if (money > this.balance) throw new Error("Insufficient funds"); this._balance -= money; } }

现在你可以像读普通属性一样获取余额：

const account = new BankAccount(100); console.log(account.balance); // 100 account.deposit(50); console.log(account.balance); // 150 account.balance = -10; // 抛错！

这里的_balance并非真正的私有字段（ES2022 之前没有），只是一个命名约定，提醒开发者：“别在外面直接改我”。

子类怎么来？用extends实现继承

假设我们要做一个学生类，他也有人的基本信息，但多了个年级属性，还能学习。

以前你可能得复制一遍Person的代码再加点东西，但现在只需要一句话：

class Student extends Person { constructor(name, age, grade) { super(name, age); // 必须先调用父类构造函数 this.grade = grade; } study() { console.log(`${this.name} is studying...`); } // 重写父类方法 sayHello() { console.log(`Hi, I'm ${this.name}, a student in grade ${this.grade}`); } }

关键点来了：
-extends表示继承自Person；
-super(name, age)是调用父类的constructor，必须在使用this之前调用；
-sayHello方法被重写了，子类优先；
- 新增了study方法，扩展功能。

试试看效果：

const s = new Student("Tom", 20, "Junior"); s.sayHello(); // Hi, I'm Tom, a student in grade Junior s.study(); // Tom is studying...

多态也生效了：

function greetEveryone(people) { people.forEach(person => person.sayHello()); } greetEveryone([ new Person("Mr. Lee", 45), new Student("Lucy", 19, "Freshman") ]); // 各自用自己的方式打招呼

继承背后的原理：原型链是如何延伸的？

你以为extends是魔法？其实它也只是帮你连好了原型链。

当你说class Student extends Person，JavaScript 在背后悄悄做了几件事：

1. Student.prototype.__proto__ = Person.prototype
   → 所以实例方法可以向上查找；
2. Student.__proto__ = Person
   → 所以静态方法也能继承；
3. super()实际就是Parent.call(this, ...args)的语法糖；
4. 方法调用遵循“就近原则”，找不到就往上找。

这也解释了为什么：

s instanceof Student; // true s instanceof Person; // true

因为instanceof查的就是原型链。

再进一步：多层继承与方法增强

你可以继续派生更具体的类，比如研究生：

class GraduateStudent extends Student { constructor(name, age, grade, researchTopic) { super(name, age, grade); this.researchTopic = researchTopic; } sayHello() { super.sayHello(); // 先执行父类逻辑 console.log(`Researching on: ${this.researchTopic}`); } static createFromStudent(student, topic) { const { name, age, grade } = student; return new GraduateStudent(name, age, grade, topic); } } const gs = new GraduateStudent("Bob", 25, "PhD", "AI Ethics"); gs.sayHello(); // 输出: // Hi, I'm Bob, a student in grade PhD // Researching on: AI Ethics

这里展示了两个高级技巧：
-调用super.sayHello()：保留父类行为的同时增加新功能；
-静态工厂方法：提供更灵活的对象创建方式，封装细节。

实际应用场景：什么时候该用类？

别以为class只是用来炫技的。在真实项目中，它有很多实用场景：

✅ UI 组件定义

虽然 React 现在主推函数组件 + Hooks，但在 Vue 2 和一些老项目里，类仍然是组织组件逻辑的重要方式。

class UserCard extends Component { render() { return `<div>Hello ${this.props.name}</div>`; } }

✅ 工具类封装

比如封装一个 HTTP 请求客户端：

class HttpClient { constructor(baseURL) { this.baseURL = baseURL; } async get(url) { return fetch(this.baseURL + url).then(r => r.json()); } static createJsonPlaceholder() { return new HttpClient('https://jsonplaceholder.typicode.com'); } }

✅ 游戏或管理系统中的实体建模

在一个学生管理系统中，常见的继承结构可能是：

Person ↓ Student ↓ GraduateStudent

共用姓名、年龄等基础属性，逐级扩展能力，减少重复代码。

使用类的最佳实践：别踩这些坑

class很强大，但也容易滥用。记住这几个建议：

❌ 不要过度继承

超过两到三层的继承链会让代码难以维护。优先考虑组合代替继承：

// 更好的方式：通过对象组合功能 const CanStudy = { study() { /*...*/ } }; Object.assign(Student.prototype, CanStudy);

✅ 合理使用静态方法

静态方法适合做工具函数，不要在里面引用this或实例状态。

✅ 保护内部状态

尽管 ES2022 才正式支持私有字段（#privateField），但你可以用_前缀表示“请勿外部访问”：

this._password = 'secret'; // 约定俗成

✅ 方法重写要小心

确保重写后的行为符合预期，尤其是被其他模块依赖的方法，避免破坏 Liskov 替换原则。

✅ 大项目推荐搭配 TypeScript

给类加上类型注解，能极大提升可读性和安全性：

class Person { constructor(public name: string, public age: number) {} }

总结一下：你真正需要掌握的是什么？

• class是语法糖，本质仍是原型继承；
• extends和super让继承变得简洁清晰；
• 支持构造函数、实例方法、静态方法、getter/setter 完整特性；
• 多态和instanceof依然有效；
• 提高了代码复用性、可读性和团队协作效率。

更重要的是：学会用类去抽象现实世界中的事物关系，而不是为了用而用。

未来，随着私有字段、装饰器等新特性的普及，JavaScript 的类模型还会变得更强大。但无论怎么变，理解其背后的原型机制，才是你驾驭这门语言的根本。

如果你正在写一个复杂的前端应用，不妨试着把核心模型抽象成类。你会发现，代码突然变得有条理了。

如果你在实现过程中遇到了其他挑战，欢迎在评论区分享讨论。