当前位置:首页 > JavaScript

js super 实现

2026-03-13 19:51:10JavaScript

super 在 JavaScript 中的实现

在 JavaScript 中,super 关键字用于调用父类的构造函数或方法。它主要用于类继承中,确保子类能够正确访问父类的属性和方法。

js 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
console.log(child.age); // 输出: 10

调用父类方法

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 from Parent';
  }
}

class Child extends Parent {
  static staticMethod() {
    return super.staticMethod() + ' and Static method from Child';
  }
}

console.log(Child.staticMethod()); // 输出: Static method from Parent and Static method from Child

注意事项

  • super 只能在派生类(子类)中使用,否则会抛出语法错误。
  • 在构造函数中,super 必须在访问 this 之前调用。
  • super 不能单独使用,必须作为函数调用(如 super())或属性访问(如 super.method())。

示例:完整的继承链

class GrandParent {
  constructor() {
    this.family = 'GrandParent';
  }
}

class Parent extends GrandParent {
  constructor() {
    super();
    this.parent = 'Parent';
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.child = 'Child';
  }
}

const child = new Child();
console.log(child.family); // 输出: GrandParent
console.log(child.parent); // 输出: Parent
console.log(child.child); // 输出: Child

通过以上示例和说明,可以清晰地理解 super 在 JavaScript 中的实现和使用方式。

标签: jssuper
分享给朋友:

相关文章

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现 拖动

js实现 拖动

实现拖动的步骤 HTML 结构 创建一个可拖动的元素和一个放置区域: <div id="draggable" draggable="true">拖动我</div> <d…

js实现复制功能实现

js实现复制功能实现

使用document.execCommand方法(传统方式,已逐渐被弃用) 传统方式通过document.execCommand('copy')实现复制功能,需先选中文本。以下是一个完整示例: fu…

js尚未实现

js尚未实现

JavaScript 尚未实现的功能 JavaScript 作为一门不断发展的语言,仍有一些功能尚未被原生支持或标准化。以下是一些常见的尚未实现的功能或特性: Promise.any() 的替代方案…

js实现筛选

js实现筛选

JavaScript 实现数据筛选的方法 使用 Array.filter() 方法 Array.filter() 是 JavaScript 中最常用的筛选方法,它会创建一个新数组,包含通过回调函数测试…

js实现递归

js实现递归

递归的基本概念 递归是一种通过函数调用自身来解决问题的方法。在JavaScript中,递归通常用于处理具有重复子问题或分治结构的数据,例如树形结构、阶乘计算等。 递归的实现要点 基线条件(Base…