导入/导出、ES6 和扩展类答案

【问题标题】：Imports/Exports, ES6 and Extending classes导入/导出、ES6 和扩展类
【发布时间】：2016-12-17 09:56:02
【问题描述】：

我正在创建一个名为 Carousel 的类，并希望在该类中调用一个名为 Pips 的类，该类将通过父子关系绑定到轮播。

我遇到的问题是我收到以下错误：

Super expression must either be null or a function, not undefined

我当前的代码如下所示：

// carousel.js

import { Pips } from './pips'

export class Carousel {
  constructor( options ) {
    this.pip_type = options.pip_type;
  }

  setup() {
    this.initPips();
  }

  initPips() {
    var p = new Pips(
      { 
        carousel_name : 'carousel',
        pip_type      : this.pip_type
      }
    );
  }
}


// pips.js

import { Carousel } from './carousel'

export class Pips extends Carousel {
  constructor(options) {
    super(options);
    console.log( 'Pips Initialised' );
  }

}

很明显，存在循环依赖，但是当我尝试用位于单独文件中的另一个类扩展一个类时，我看不出如何使用 ES6 语法避免这种情况 - 如果我从点子中删除 import { Carousel }... .js 然后我只是得到Carousel is undefined的错误。

如果我将 Pips 类移动到与 Carousel 类相同的文件中并在其下方，那么我不会收到此错误，因此认为问题可能与 ES6 提升导入有关。

对我来说，在这两个类之间建立这种关系的最佳方式是什么？

【问题讨论】：

标签： javascript import ecmascript-6 export es6-class

【解决方案1】：

这更多是类层次结构中的设计问题。超类不应该知道和/或使用对子类的引用。

Check here for details

也许您应该使用组合而不是尝试进行循环引用。

我真的不明白为什么 Pips 继承自 Carousel。

希望这会有所帮助。

【讨论】：