JS使用ES模块时如何跨类导入方法并访问实例属性

你当前代码拿不到预期值是三个问题导致的：

• array是A类实例的自有属性：你在constructor里写的this.array = []，只有new A()创建出来的实例对象上才有这个属性，直接通过类名A访问是拿不到的——A本身是类（构造函数），没有挂载这个属性。
• 双向依赖隐患：A模块里要创建B的实例，B模块又反向导入A，模块加载时很容易出现引用未初始化的问题。
• 选择器写法错误：document.getElementById('#zone')是无效写法，getElementById只接收纯id字符串，不需要加#前缀，加了会直接返回null，后续DOM操作会报错。

方案1：参数传参解耦（最推荐） #

不要在B里反向导入A，创建B实例时主动把需要的依赖传入，从根源上避免循环依赖，代码可维护性最高。
修正后的A类代码：

// A.js
import B from "./B.js";
export default class A {
  constructor() {
    // 修正选择器写法，去掉#前缀
    this.zone = document.getElementById('zone');
    this.array = [];
    this.init();
  }
  
  init() {
    // 原有初始化逻辑
  }

  methodToImport(id) {
    const DOM = `<h1>HTML Content</h1>`;
    this.zone.insertAdjacentHTML('beforeend', DOM);
    // 创建B实例时，把array引用作为参数传入
    const bInstance = new B(this.zone.lastElementChild, this.array);
    this.array.push(bInstance);
    // 如果需要B初始化时array里已经包含自身实例，把B构造函数里的this.init()删掉，在这里push完再调用：
    // bInstance.init();
  }
}

修正后的B类代码：

// B.js
// 不需要再导入A，完全解耦
export default class B {
  constructor(element, instanceArray) {
    // 挂载传入的array引用
    this.linkedArray = instanceArray;
    this.init();
  }

  init() {
    // 直接访问传入的数组即可
    // JS数组是引用类型，后续A里对array的增删操作在这里都能实时拿到最新值
    console.log(this.linkedArray);
  }
}

方案2：使用类静态属性（不推荐，仅作补充） #

如果一定要通过类名直接访问array，可以把array设为A类的静态属性，所有A实例共享同一份数据。注意这种写法在页面上创建多个A实例时，会出现数据互相污染的问题。
A类调整：

// A.js
import B from "./B.js";
export default class A {
  // 声明静态属性，直接挂载到类本身
  static array = [];
  constructor() {
    this.zone = document.getElementById('zone');
    this.init();
  }

  init() {
    // 原有逻辑
  }

  methodToImport(id) {
    const DOM = `<h1>HTML Content</h1>`;
    this.zone.insertAdjacentHTML('beforeend', DOM);
    const bInstance = new B(this.zone.lastElementChild);
    // 静态属性需要通过类名访问，不能用this
    A.array.push(bInstance);
  }
}

B类调整：

// B.js
import A from "./A.js";
export default class B {
  constructor(element) {
    this.init();
  }

  init() {
    // 可以直接访问到静态属性
    // 注意：如果是new B之后才push到array，这里打印的array里不会包含当前B实例
    console.log(A.array);
  }
}

• 尽量避免模块/类之间的双向依赖，这类代码后期迭代很容易出现难以排查的引用错误，优先通过参数传值、事件通知的方式做逻辑解耦。
• 区分类的静态属性和实例属性：实例属性归每个实例自己所有，互不干扰；静态属性全类共享，适合存全局固定配置，不适合存实例相关的业务数据。
• 调用DOM API时注意参数规则：getElementById、getElementsByClassName这类传id/class名的API不需要加选择器前缀，只有querySelector、querySelectorAll需要写完整的CSS选择器。

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