当前位置:首页 > JavaScript

js 实现super

2026-02-02 10:57:21JavaScript

实现 super 的方法

在 JavaScript 中,super 关键字用于调用父类的构造函数或方法。以下是几种常见的实现方式:

在构造函数中调用 super

在子类的构造函数中,必须调用 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'
console.log(child.age); // 10

在方法中调用 super

super 也可以用于调用父类的方法。

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

class Child extends Parent {
  greet() {
    return `${super.greet()} and Child`; // 调用父类的 greet 方法
  }
}

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

使用 super 访问父类的静态方法

super 还可以用于调用父类的静态方法。

js 实现super

class Parent {
  static getMessage() {
    return 'Static message from Parent';
  }
}

class Child extends Parent {
  static getMessage() {
    return `${super.getMessage()} and Child`; // 调用父类的静态方法
  }
}

console.log(Child.getMessage()); // 'Static message from Parent and Child'

注意事项

  • 在子类的构造函数中,super() 必须在使用 this 之前调用,否则会抛出错误。
  • 如果子类没有定义构造函数,JavaScript 会默认调用 super()
  • super 只能在类的方法中使用,不能在普通函数中使用。
class Parent {}

class Child extends Parent {
  constructor() {
    // 如果不调用 super(),会抛出错误
    this.name = 'Alice'; // ReferenceError: Must call super constructor in derived class
    super();
  }
}

标签: jssuper
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…