JavaScript super在对象字面量与class中的差异

作者:技术拾光

时间:2026-07-26

浏览:166

对象字面量中super只能在方法内使用,需通过Object.setPrototypeOf手动设置原型链,指向当前对象原型;class中super根据上下文动态绑定,构造函数必须调用super(),普通方法指向父类原型,静态方法指向父类本身。两者super.xxx()内this均指向当前调用者。

文章目录

super 在对象字面量与 class 中的行为差异,是 JavaScript 开发中容易混淆的一个关键点。简单来说,对象字面量中的 super 指向当前对象的原型,且只能在方法内部使用,依赖手动设置原型链;而 class 中的 super 根据上下文(构造函数、普通方法、静态方法)动态绑定到父类或父类原型,语法约束更为严格。

JavaScript super在对象字面量与class中的差异

对象字面量中的 super:仅限方法内使用,依赖显式原型设置

要在对象字面量中使用 super,必须满足两个前提条件:该对象已通过 Object.setPrototypeOf() 显式设置原型;同时 super 只能出现在方法定义中,不能用于属性初始化或顶层作用域。

  • super 调用的是当前对象原型上的同名方法,this 始终指向当前对象本身,而非原型对象。
  • 对象字面量没有 constructor,因此不存在“构造函数中使用 super”的情况。
  • 不能单独写 console.log(super),会触发报错——super 不是可求值的对象,而是语法层面的引用机制。
  • 示例代码:
    const parent = { getName() { return 'parent'; } };
    const child = { getName() { return `child + ${super.getName()}`; } };
    Object.setPrototypeOf(child, parent);
    child.getName(); // "child + parent"

class 中的 super:分场景使用,具有强制规则

在 class 继承体系下,super 的用法更严格且更丰富,需要区分它“作为函数”和“作为对象”两种角色。

  • 在子类 constructor 中必须调用 super(),否则无法访问 this。此时 super 代表父类构造函数,以函数形式调用。
  • 在普通实例方法中,super 指向父类的 prototype,即 Object.getPrototypeOf(子类.prototype)。调用 super.xxx() 时,this 仍指向当前子类实例。
  • 在静态方法中,super 指向父类本身(而非其 prototype),可用于调用父类的静态方法。
  • 不允许在 class 的顶层(非方法或非构造函数位置)使用 super。

关键差异总结

最容易忽略的一点是:对象字面量中的 super 不涉及继承链初始化,它只是运行时原型查找;而 class 中的 super 在 constructor 里承担了初始化父类状态的职责,是继承机制的强制环节。

  • 对象字面量的 super 是“运行时动态查找原型”,无语法强制,但需要手动设置原型。
  • class 的 super 是“编译期语义关键字”,constructor 中不调用会直接抛出 ReferenceError。
  • 两者 super.xxx() 内部的 this 都指向当前调用者(而非父级对象),这一点保持一致。
  • class 中 super 可用于访问静态成员;对象字面量中无法通过 super 访问原型的静态属性,因为原型上不存在“静态”的概念。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章