javascript对象如何创建_原型和类哪种方式更好【教程】

13次阅读

原型和类本质相同,class 是函数 + 原型链的语法糖,所有行为均基于 [[Prototype]] 链;继承、this 绑定、属性初始化等陷阱均源于对原型机制理解不足。

javascript 对象如何创建_原型和类哪种方式更好【教程】

原型和类不是“哪种更好”的关系,而是同一套机制的两种写法——classfunction + 原型链的语法糖,底层全靠原型工作。

class 创建对象时,原型链怎么走

class 看起来像 Java,但行为完全基于原型:构造函数的 prototype 仍是实例的隐式原型(__proto__),静态方法挂在 constructor 上,不进原型链。

  • class Person {constructor(n) {this.name = n;} say() { return 'hi';} } → 实例的 __proto__ 指向 Person.prototype
  • Person.sayStatic = () => {} → 这个方法不会被实例继承,只能 Person.sayStatic() 调用
  • 继承用 extends,本质是 Object.setPrototypeOf(Sub.prototype, Super.prototype)

手动操作原型(prototype / Object.create)适合什么场景

需要精细控制原型链、避免构造函数调用、或实现对象复用时,直接操作原型更透明。比如创建无构造逻辑的纯行为对象,或模拟接口 / 混入(mixin)。

  • const animal = {eat() {return 'nom';} }; → 直接作为原型:Object.create(animal)
  • function Dog() {} + Dog.prototype = Object.create(animal); → 显式切断默认 constructor 指向,需手动补 Dog.prototype.constructor = Dog
  • 动态修改原型(如测试中替换方法):直接改 obj.__proto__.method = newImpl,但现代环境应优先用 Object.setPrototypeOf

哪些地方容易踩坑

看似语法简洁的 class,在继承、this 绑定、静态属性初始化顺序上反而更容易出错;而原型写法虽然啰嗦,但每一步都可见、可控。

立即学习Java 免费学习笔记(深入)”;

  • class 中字段初始化(prop = val)是在构造函数内执行的,不是原型上的属性,会导致内存重复分配
  • 箭头函数在 class 里不能用作方法(会丢失 this 绑定上下文),但写在原型上就天然绑定实例
  • super() 必须在子类 constructor 首行调用,否则报 ReferenceError: Must call super constructor
  • Object.assign 浅拷贝原型方法到实例,会破坏原型链查找,且无法被 instanceof 识别

真正关键的不是选 class 还是原型,而是理解所有方式最终都落在 [[Prototype]] 链上。写 class 时如果忘了它背后仍是函数和原型,就很容易掉进 this 丢失、继承断裂、静态 / 实例混淆这些坑里。

text=ZqhQzanResources