当前位置:首页 > JavaScript

js super 实现

2026-04-05 14:05:23JavaScript

super 在 JavaScript 中的实现

在 JavaScript 中,super 关键字用于调用父类的构造函数或方法。它在类继承中扮演重要角色,确保子类可以访问父类的属性和方法。

调用父类构造函数

在子类的构造函数中,super() 必须在 this 之前调用,否则会抛出错误。这是因为 super() 负责初始化父类的 this 绑定。

js super 实现

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
}

const child = new Child('Alice', 10);
console.log(child.name); // 输出: Alice

调用父类方法

super 也可以用于调用父类的方法,通常用于方法重写(override)时保留父类的逻辑。

js super 实现

class Parent {
  greet() {
    return 'Hello from Parent';
  }
}

class Child extends Parent {
  greet() {
    return super.greet() + ' and Hello from Child';
  }
}

const child = new Child();
console.log(child.greet()); // 输出: Hello from Parent and Hello from Child

super 在静态方法中的使用

super 也可以在静态方法中调用父类的静态方法。

class Parent {
  static staticMethod() {
    return 'Static method in Parent';
  }
}

class Child extends Parent {
  static staticMethod() {
    return super.staticMethod() + ' extended in Child';
  }
}

console.log(Child.staticMethod()); // 输出: Static method in Parent extended in Child

super 的限制

  • super 只能在派生类(子类)中使用,普通函数或非继承类中使用会报错。
  • 在构造函数中,super() 必须在访问 this 之前调用。
  • 如果子类没有定义构造函数,会默认调用 super() 并传递所有参数。

super 的实现原理

super 的行为基于 JavaScript 的原型链机制。当调用 super.method() 时,引擎会从当前类的 [[HomeObject]] 属性指向的原型对象上查找方法。[[HomeObject]] 是函数在定义时确定的,指向方法所属的对象。

// 近似实现逻辑(非实际代码)
function getSuperMethod(currentClass, methodName) {
  const parentProto = Object.getPrototypeOf(currentClass.prototype);
  return parentProto[methodName];
}

标签: jssuper
分享给朋友:

相关文章

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…