ES6 模块和继承

Question

我有以下 JavaScript 文件：

src/js/classes/Lexus.js：

import {Car} from 'src/js/classes/Car';

export class Lexus extends Car {
  constructor() {
    super("Lexus");
  }
}

src/js/classes/Mercedes.js：

import {Car} from 'src/js/classes/Car';

export class Mercedes extends Car {
  constructor() {
    super("Mercedes");
  }
}

src/js/classes/Car.js：

import {Lexus} from 'src/js/classes/Lexus'; //either of those imports works, but not both!
import {Mercedes} from 'src/js/classes/Mercedes'; //either of those imports works, but not both!

export class Car {
  constructor(make) {
    this.make = make;
  }

  static factory(msg) {
    switch(msg) {
      case "Lexus":
        return new Lexus();
      case "Mercedes":
        return new Mercedes();
    }
  }
}

和 app.js：

import {Lexus} from 'src/js/classes/Lexus';
import {Mercedes} from 'src/js/classes/Mercedes';
import {Car} from 'src/js/classes/Car';

var car = Car.factory("Lexus");
console.log(car);

有趣的是，如果我将 either Lexus 或 Mercedes 导入 Car 类并调用 app.js 中的工厂方法 - 一切正常；但是，如果我将 both Lexus 和 Mercedes 导入 Car 类，则会出现错误：

超级表达式必须为 null 或函数，而不是未定义

我错过了什么？

Answer 1

通常，您希望不具有像这样的循环依赖。 在最好的时候循环依赖，打破一切，不要编译（或转译）。 在最坏的情况下循环依赖，导致合并和版本控制冲突，导致代码很难辨别，看起来它们工作得很好，直到它们停止，一些可怕的状态假设导致了一些可怕的错误。

您的解决方案（如果您在这种继承形式上死心）是将Car 提取到它自己的文件/类中，可以单独导入，并使工厂与类分开.

这在英语中是完全有道理的。
汽车不制造雷克萨斯（Lexi？）。

此外，如果您确实想要保留它（不是一个好主意），那么您应该有一个注册方法，而不是硬编码的解决方案，您可以通过它注册“Lexus”和函数这造就了一辆新的雷克萨斯。

import Car from "./car";
class Lexus extends Car {
  constructor () {
    super("Lexus");
  }
  // starting to look like a bad idea
  static make () {
    return Car.make("Lexus");
  }
  // starting to look worse
  static register () {
    /* this register method does nothing, so that Lexus can't make other cars... */
  }
}

Car.register("Lexus", () => new Lexus());

export default Lexus;

情况会变得更糟，但这已经很糟糕了。

如果你走另一条路：

// carfactory.js

const carTypes = new Map();
class CarFactory {
  static register (name, implementation) {
    carTypes.set(name, implementation);
    return CarFactory;
  }
  static make (name) {
    const makeCar = carTypes.get(name);
    return makeCar();
  }

  register (name, implementation) {
    CarFactory.register(name, implementation);
    return this;
  }
  make (name) { return CarFactory.make(name); }
}

export default CarFactory;


// index.js
import Car from "./classes/car";
import Lexus from "./classes/lexus";

import CarFactory from "./factories/car";

CarFactory
  .register("Lexus", () => new Lexus())
  .register("Bentley", () => new Bentley());

init( CarFactory );

function init (Car) {
  const lexus = Car.make("Lexus");
}

现在，没有班级需要知道他们不应该知道的事情。