javascript - 类的实例化和排序导致ES6中的错误

我在游戏中使用ES6类。我有两个问题：

问题1）我为BattleMode和ExplorationMode实例化两个单例类，并传入初始参数type。

即使我正在console.logging explorationMode（ExplorationMode的实例），它也会显示Class BattleMode类型的exploration。为什么是这样？

问题2）我使用带有babel的gulp将脚本编译成main.js。上面的ExplorationMode和BattleMode都从父类Mode继承。 Gulp遍历modes/文件夹，并将它们顺序添加到main.js。



显然，ES6关心JavaScript的顺序，这意味着如果BattleMode是Mode的子代，则它将表示找不到其父代。


  未捕获的TypeError：超级表达式必须为null或函数，且未定义


这将强制重命名mode.js，使其首先出现在文件夹顺序中。那很hacky。如果我在A_mode前面加上，错误就会消失。



除了重命名或指定gulp中的每个父级出现在其子级之前，还有更好的解决方案吗？

否则，我只能使用对象：

var Mode = Mode || {};

Mode.BattleMode = Mode.BattleMode || {
    doThing : function () {
         ...

问题1：

class StateManager {
    constructor(type) {
        if (!stateManagerInstance) {
            stateManagerInstance = this;
        }
        this.type = type;
        const battleMode = new BattleMode('battle');
        const explorationMode = new ExplorationMode('exploration');

        console.log('MODE: ', explorationMode); // Wrong
        ...

控制台输出：


  MODE：Class BattleMode {类型：“ exploration”，screenState：“ battle”}


模式：

/*
  Define as Singleton
 */
let modeInstance = null;

class Mode {
    constructor() {
        if (!modeInstance) {
            modeInstance = this;
        }

        return modeInstance;
  }

}

探索模式：

/*
  Define as Singleton
 */
let explorationInstance = null;

class ExplorationMode extends Mode {
    constructor(type) {
        super(type);

    this.type = type;

        if (!explorationInstance) {
            explorationInstance = this;
        }

    this.screenState = '';

        return explorationInstance;
  }

对战模式：

/*
  Define as Singleton
 */
let battleInstance = null;

class BattleMode extends Mode {
    constructor(type) {
        super(type);

    this.type = type;

        if (!battleInstance) {
            battleInstance = this;
        }

    this.screenState = '';

        return battleInstance;
  }

问题2：

吞咽：

gulp.task('build-dev', function() {
    gulp.run('scripts');
  gulp.watch('js/**/*.js', function() {
    gulp.run('scripts');
  });
});

gulp.task('scripts', function() {
    return gulp.src([
            'js/**/*.js',
        ])
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(concatJs('main.js'))
        .pipe(gulp.dest('build/js'));
});

最佳答案

这是为什么单例可以成为反模式的一个示例。它提供了额外的复杂性而没有真正的好处。子班甚至没有从继承中受益。

由于BattleMode和ExplorationMode都从Mode继承，所以首先评估Mode构造函数。第一个实例保存到modeInstance。因为BattleMode首先被实例化，所以无论在子构造函数中发生什么，它都是BattleMode的实例。

在这种情况下，应该将其他单例类替换为普通对象。

关于javascript - 类的实例化和排序导致ES6中的错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49342068/