当前位置:首页 > JavaScript

js 实现super

2026-02-02 10:57:21JavaScript

实现 super 的方法

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

js 实现super

在构造函数中调用 super

在子类的构造函数中,必须调用 super() 才能正确初始化父类的属性。

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'
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 还可以用于调用父类的静态方法。

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 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js如何实现继承

js如何实现继承

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

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的J…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…