17370845950

JavaScript面向对象基于原型机制，ES6 class是构造函数的语法糖；传统方式手动操作prototype，class则提供更严格、清晰的继承语法，但底层原理不变。

JavaScript 实现面向对象编程（OOP）主要依靠原型（prototype）机制，ES6 引入的 class 语法是构造函数的语法糖，并非全新面向对象模型。它没有改变底层基于原型的本质，但让代码更清晰、更接近其他语言的类式写法。

传统构造函数：基于原型的手动建模

在 ES6 之前，开发者通过函数 + prototype 模拟类：

• 用普通函数作为构造器（如 function Person(name) { this.name = name; }）
• 方法挂载到 Person.prototype 上，实现共享（如 Person.prototype.say = function() { return 'Hi, ' + this.name; };）
• 实例通过 new Person('Alice') 创建，内部自动链接到原型
• 继承需手动设置原型链（如 Student.prototype = Object.create(Person.prototype)），并修复 constructor

ES6 class：更简洁、更严格的语法糖

class 写法本质上仍编译为构造函数和原型操作，但约束更强、表达更直观：

• 必须用 new 调用，不能当作普通函数执行（否则报错）
• 方法默认不可枚举（Object.keys() 不会返回 class 中定义的方法）
• 自动启用严格模式，且不提升（class 声明不会被 hoisted）
• 支持 static 方法、getter/setter、extends 和 super，继承逻辑更清晰（如 class Student extends Person { constructor() { super(); ... } }）

关键差异总结

相同点：都依赖原型链，实例共享原型上的方法，继承本质都是修改 [[Prototype]] 链。

不同点：

• 构造函数可被直接调用，class 不可以
• 构造函数的 prototype 属性可自由赋值，class 的原型方法只能在类体中定义
• class 中的静态方法绑定在构造函数本身，传统方式需手动赋值（如 Person.count = function() {...}）
• 子类 constructor 中若使用 this，必须先调用 super()；传统构造函数继承无此强制要求（但遗漏会导致 this 未初始化）

实际建议

日常开发推荐使用 class，语义明确、继承安全、工具链友好（如 TypeScript、Babel 支持完善）。理解构造函数和原型原理仍很重要——调试、阅读老代码、或需要动态操作原型时，底层知识不可替代。可以写 class，但心里装着 prototype。