ES6モジュールと継承

Question

私は、以下のJavaScriptファイルを持っている：

のsrc/JS /クラス/ Lexus.js：

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

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

のsrc/JS /クラス/ Mercedes.js：

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

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

のsrc/JS /クラス/ 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); 

興味深い、私は車のクラスにLexusまたはMercedesのいずれかをインポートし、app.jsでファクトリメソッドを呼び出す場合 - すべてが正常に動作します;私は車のクラスにLexusとMercedesの両方をインポートする場合しかし、私はエラーを得た：

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

私は何を欠場か？

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

を今、何のクラスは、彼らがする必要はありません事を知る必要がありません。