es6 中的类的继承

ES6 中 super 关键字的详细解析

在 ES6 中,super 关键字是类继承的核心组成部分。它用于调用父类的构造函数和方法。在子类继承父类时,super 的正确使用至关重要。了解如何使用 super() 来触发父类构造函数的执行,以及如何在方法中通过 super.method() 调用父类的方法,是理解 JavaScript 类和继承机制的关键。

1. super():调用父类构造函数

当子类继承父类时,子类的构造函数默认并不会执行父类的构造函数。为了确保父类的初始化逻辑被正确执行,子类必须显式调用 super() 来触发父类构造函数的执行。特别是当父类有构造函数时,super() 必须在子类构造函数中调用,否则子类无法正确继承父类的属性,且会抛出错误。

示例:不调用 super() 会出错
js 复制代码
class A {
  constructor(name) {
    this.name = name;
    console.log('A constructor');
  }
}

class B extends A {
  constructor(name, age) {
    // 如果没有调用 super(name),会导致错误
    this.age = age;
    console.log('B constructor');
  }
}

const b = new B('Alice', 25); // 错误:必须先调用 super()

运行上述代码时,将抛出如下错误:

js 复制代码
Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this'.

这是因为在子类构造函数中,必须先调用 super(),以便初始化父类的部分。这是 JavaScript 类继承中的一条规则:子类构造函数中必须先调用 super(),然后才能访问 this

2. super.method():调用父类的方法

除了在构造函数中调用 super() 以初始化父类的属性外,super 还可以在子类的方法中用于调用父类的同名方法。这对于在子类中重写父类方法时保留父类的原有逻辑非常有用。

示例:子类调用父类的方法
js 复制代码
class A {
  method() {
    console.log('A method');
  }
}

class B extends A {
  method() {
    super.method();  // 调用父类 A 的 method()
    console.log('B method');
  }
}

const b = new B();
b.method();

输出:

js 复制代码
A method
B method

在这个例子中,子类 B 重写了 method 方法,并在其中通过 super.method() 调用了父类 Amethod() 方法。这样,子类不仅执行了父类的方法,还可以添加自己的逻辑。

3. super() 在多层继承中的行为

当存在多层继承时,super() 的调用顺序会遵循继承链,从子类向上逐层调用父类的构造函数和方法。

示例:多层继承中的 super()
js 复制代码
class A {
  constructor() {
    console.log('A constructor');
  }
  method() {
    console.log('A method');
  }
}

class B extends A {
  constructor() {
    super();  // 调用 A 的构造函数
    console.log('B constructor');
  }

  method() {
    super.method();  // 调用 A 的 method()
    console.log('B method');
  }
}

class C extends B {
  constructor() {
    super();  // 调用 B 的构造函数,B 中又调用了 A 的构造函数
    console.log('C constructor');
  }

  method() {
    super.method();  // 调用 B 的 method(),B 中又调用了 A 的 method()
    console.log('C method');
  }
}

const c = new C();
c.method();

输出:

js 复制代码
A constructor
B constructor
C constructor
A method
B method
C method

在这个例子中,C 类继承了 B,而 B 又继承自 Asuper() 会依次触发每个父类的构造函数和方法。首先,C 调用 super() 触发 B 的构造函数,B 的构造函数又调用 super() 触发 A 的构造函数。然后,在调用 c.method() 时,C 调用自己的 method(),而 Bmethod() 又调用 Amethod()

4. 父类没有构造函数时的行为

如果父类没有显式定义构造函数(即默认构造函数),子类仍然需要调用 super(),尽管父类的构造函数不执行任何操作。即使没有初始化逻辑,子类仍然需要调用 super() 来确保正确的继承行为。

示例:父类没有构造函数时
js 复制代码
class A {
  // 没有显式的构造函数
}

class B extends A {
  constructor(age) {
    super();  // 必须调用 super()
    this.age = age;
    console.log('B constructor');
  }
}

const b = new B(25);

尽管 A 没有定义构造函数,子类 B 仍然需要调用 super(),以确保继承链的完整性。

总结

在 ES6 的类继承中,super() 是子类与父类之间进行交互的关键。当子类继承父类时,子类的构造函数必须显式调用 super(),否则无法访问父类的 this,并且会导致错误 。通过 super.method(),子类可以调用父类的方法,继承父类的行为,并在此基础上进行扩展。对于多层继承,super() 会依次触发每一层父类的构造函数和方法。

理解和正确使用 super() 是实现类继承和子类扩展父类功能的基础。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞9 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作