javascript如何实现面向对象编程?_ES6类语法与传统javascript构造函数有何异同?

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/setterextendssuper,继承逻辑更清晰(如 class Student extends Person { constructor() { super(); ... } }

关键差异总结

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

不同点

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

实际建议

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