如何用ES6类实现Vanilla JS对象式插件的嵌套函数结构？

你提到的对象字面量嵌套结构完全可以用ES6类来实现，甚至能做得更灵活。我给你分享几个常用的实现方式，适配不同的场景：

方案1：构造函数内直接初始化core对象 #

这是最贴近你原有结构的方式，直接在类的构造函数里定义core属性，里面的方法可以通过箭头函数绑定类实例的this，方便访问config等实例属性：

class Start {
  constructor() {
    // 初始化配置项
    this.config = { a: 1 };
    
    // 定义嵌套的core对象
    this.core = {
      engine_part1: () => {
        // 箭头函数的this指向类实例，直接访问config
        console.log('Engine Part 1 running, config.a:', this.config.a);
      },
      engine_part2: function() {
        // 普通函数的this指向core对象本身，如果要访问类实例，需要提前绑定或者用闭包
        console.log('Engine Part 2 running');
      }
    };
  }
  
  // 类的init方法
  init() {
    this.core.engine_part1();
  }
}

// 使用示例
const myStart = new Start();
myStart.init(); // 输出: Engine Part 1 running, config.a: 1

这种方式的优势是结构直观，和你原来的对象字面量几乎一一对应，适合逻辑简单的场景。

方案2：用getter属性动态生成core #

如果你的core需要根据实例状态动态调整，可以把它定义成类的getter属性，每次访问instance.core时都会生成最新的对象：

class Start {
  constructor() {
    this.config = { a: 1 };
  }
  
  // 通过getter定义core
  get core() {
    return {
      engine_part1: () => {
        console.log('Engine Part 1 via getter, config.a:', this.config.a);
      },
      engine_part2: () => {
        console.log('Engine Part 2 via getter');
      }
    };
  }
  
  init() {
    this.core.engine_part1();
  }
}

如果需要让core保持单例（每次访问都是同一个对象），可以在构造函数里缓存一下：

class Start {
  constructor() {
    this.config = { a: 1 };
    this._core = null; // 缓存core对象
  }
  
  get core() {
    if (!this._core) {
      this._core = {
        engine_part1: () => {
          console.log('Cached Engine Part 1, config.a:', this.config.a);
        }
      };
    }
    return this._core;
  }
}

方案3：拆分独立的Core类（适合复杂逻辑） #

如果core里的方法逻辑比较复杂，或者后续需要单独扩展，建议把core拆成独立的类，然后在Start类里实例化它：

// 单独定义Core类，封装引擎相关逻辑
class Core {
  constructor(parentInstance) {
    this.parent = parentInstance; // 保存Start类实例的引用，方便访问config
  }
  
  engine_part1() {
    console.log('Engine Part 1 from Core Class, config.a:', this.parent.config.a);
  }
  
  engine_part2() {
    console.log('Engine Part 2 from Core Class');
  }
}

class Start {
  constructor() {
    this.config = { a: 1 };
    this.core = new Core(this); // 实例化Core，传入当前Start实例
  }
  
  init() {
    this.core.engine_part1();
  }
}

这种方式的优势是代码模块化，逻辑拆分清晰，适合大型插件的维护和扩展。

注意点：关于this的指向 #

• 箭头函数会自动绑定类实例的this，所以在core的箭头函数里可以直接访问this.config。
• 如果用普通函数，this默认指向core对象本身，要是需要访问类实例的属性，可以提前在构造函数里用bind绑定，或者用闭包保存实例引用：

  constructor() {
    const self = this; // 保存实例引用
    this.core = {
      engine_part2: function() {
        console.log('Access config via closure:', self.config.a);
      }
    };
  }
  

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