ES6模块和继承 [英] ES6 modules and inheritance

问题描述

我有以下JavaScript文件：

I have the following JavaScript files:

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。来自'src / js / classes / Lexus'的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();
    }
  }
}

和应用程序。来自'src / js / classes / Lexus'的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);

有趣的是，如果我导入 雷克萨斯或 Mercedes 到Car类，并在app.js中调用factory方法 - 一切正常;但是，如果我将 雷克萨斯和梅赛德斯导入到Car类中，我得到一个错误：

The interesting thing, if I import either Lexus or Mercedes to the Car class and call the factory method in app.js - everything works fine; however if I import both Lexus and Mercedes to the Car class I got an error:

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

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

我想念什么？

推荐答案

通常，你想不有这样的循环依赖。
循环依赖在最好的时候，打破一切，不编译（或贪婪）。
循环依赖在最坏的时候，导致合并和版本冲突，导致代码真的难以辨别，看起来像他们工作正常，直到他们停止，有一些可怕的错误，由一些可怕的状态假设引起。

Typically, you want to not have circular dependencies like this. Circular dependencies at the best of times, break everything and don't compile (or transpile). Circular dependencies at the worst of times, cause merge and versioning conflicts, cause code that's really hard to discern, look like they're working just fine, until they stop, with some terrible bug caused by some terrible state assumptions.

您的解决方案（如果您对这种继承形式死亡）将要提取 Car 进入自己的文件/类，可以单独导入，并将工厂与课程分开。

Your solution (if you are dead-set on this form of inheritance) is going to be to extract Car into its own file/class, which can be imported separately, and to have the Factory be separate from the class.

英文中的哪一个完全有意义。

汽车不构造Lexix（Lexi？）。

Which, in English makes complete sense.
Cars don't construct Lexuses (Lexi?).

此外，如果你要保持这个（不是很好）想法），那么您应该有一个注册方法，而不是一个硬编码的解决方案，您可以注册雷克萨斯和其他雷克萨斯的功能。

Additionally, if you did want to keep this (not a great idea), then you should have a register method, not a hard-coded solution, whereby you register "Lexus" and the function which makes a new 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;

它变得更糟，但这已经很糟糕了。

It gets worse, but this is already plenty bad.

如果你走另一条路线：

// 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");
}

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

Now, no classes need to know about things they shouldn't have to.

这篇关于ES6模块和继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！