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]] 链。
立即学习“Java免费学习笔记(深入)”;
不同点:
- 构造函数可被直接调用,
class不可以 - 构造函数的
prototype属性可自由赋值,class的原型方法只能在类体中定义 -
class中的静态方法绑定在构造函数本身,传统方式需手动赋值(如Person.count = function() {...}) - 子类
constructor中若使用this,必须先调用super();传统构造函数继承无此强制要求(但遗漏会导致this未初始化)
实际建议
日常开发推荐使用 class,语义明确、继承安全、工具链友好(如 TypeScript、Babel 支持完善)。理解构造函数和原型原理仍很重要——调试、阅读老代码、或需要动态操作原型时,底层知识不可替代。可以写 class,但心里装着 prototype。











