JavaScript如何在抽离的mapper文件中实例化类对象，解决循环导入问题

你遇到的是ES模块的循环依赖问题：Game.js和gameMapper.js互相导入，gameMapper初始化时需要调用Game的静态方法/实例化Game，但此时Game类还未完成导出定义，拿到的是undefined，因此触发报错。

从根源上避免循环依赖，调整gameMapper仅存等级数值，在Game类中按需实例化，无需gameMapper导入Game。

步骤1：修改gameMapper.js #

// 无需导入Game，仅存储等级映射关系
export const gameMapper = [
  { level: 1, nextLevel: 2 },
  { level: 2, nextLevel: 3 },
  { level: 3, nextLevel: 4 },
];

步骤2：修改Game.js #

import { gameMapper } from './gameMapper';

export default class Game {
  constructor(level) {
    this.level = level;
  }

  static start = () => new Game(1);

  getNextLevel = () => {
    const nextLevelNum = gameMapper.find(g => g.level === this.level).nextLevel;
    return new Game(nextLevelNum);
  };
}

原有测试代码无需任何修改，可直接正常运行通过。

如果业务需要必须在gameMapper中存储Game实例，可以通过函数惰性求值规避初始化时的依赖问题：

步骤1：修改gameMapper.js #

import Game from './Game';

// 导出函数而非直接导出数组，调用时才会初始化实例
export const getGameMapper = () => [
  { level: 1, nextLevel: new Game(2) },
  { level: 2, nextLevel: new Game(3) },
  { level: 3, nextLevel: new Game(4) },
];

步骤2：修改Game.js #

import { getGameMapper } from './gameMapper';

export default class Game {
  constructor(level) {
    this.level = level;
  }

  static start = () => new Game(1);

  getNextLevel = () => getGameMapper().find(g => g.level === this.level).nextLevel;
}

内容的提问来源于stack exchange，提问作者Big Smile