Vanilla JS运行时类定义工厂的优化实现方式及替代方案咨询

你的这个类工厂实现思路能达成预期效果，但确实存在可以优化的空间：每次添加方法或属性时都创建一个新的子类，会导致原型链不断变长，而且所有属性和方法都直接挂载在实例上，每个实例都会复制一份副本，造成不必要的内存浪费。

下面给你两种更高效的替代实现方案：

方案一：基于原型的类工厂（保持类语法） #

这种方案直接在基础类的原型上添加方法，同时集中管理属性默认值，避免了频繁创建子类的问题：

function JsClassFactory() {
  // 定义基础类，构造函数统一初始化属性
  this.baseClass = class {
    constructor() {
      // 遍历默认属性，赋值给实例
      Object.entries(this.constructor.defaultProps).forEach(([key, value]) => {
        this[key] = value;
      });
    }
  };
  // 存储属性默认值的容器
  this.baseClass.defaultProps = {};

  this.addMethod = function(name, def) {
    // 方法挂载到原型上，所有实例共享
    this.baseClass.prototype[name] = def;
    return this;
  };

  this.addAttribute = function(name, def) {
    // 更新默认属性配置，新实例会使用最新值
    this.baseClass.defaultProps[name] = def;
    return this;
  };

  this.getClass = function() {
    return this.baseClass;
  };
}

// 测试代码
(function() {
  const cf = new JsClassFactory();
  cf.addAttribute('age', 35);
  cf.addAttribute('name', 'chehimi');
  cf.addMethod('myName', function() {
    console.log('i am %s', this.name);
  });
  cf.addMethod('myAge', function() {
    console.log('my age is', this.age);
  });

  let z = new (cf.getClass());
  z.myName(); // 输出: i am chehimi
  z.myAge();  // 输出: my age is 35

  cf.addAttribute('name', 'ali');
  cf.addAttribute('age', 15);

  let t = new (cf.getClass());
  t.myName(); // 输出: i am ali
  t.myAge();  // 输出: my age is 15

  // 旧实例不受新属性值影响，符合你的预期
  z.myName(); // 输出: i am chehimi
})();

方案优势： #

• 原型链始终保持简洁，不会无限嵌套
• 方法挂载在原型上，所有实例共享，节省内存
• 属性默认值集中管理，构造函数逻辑清晰，新实例自动使用最新配置

方案二：轻量工厂函数（无需类语法） #

如果不需要类的继承特性，用纯对象合并的方式实现会更轻量，完全避开类和原型链的复杂度：

function JsClassFactory() {
  const methods = {};
  const defaultProps = {};

  this.addMethod = (name, def) => {
    methods[name] = def;
    return this;
  };

  this.addAttribute = (name, def) => {
    defaultProps[name] = def;
    return this;
  };

  this.getClass = () => {
    // 返回一个工厂函数，创建实例时合并属性和方法
    return function() {
      const instance = { ...defaultProps };
      Object.assign(instance, methods);
      return instance;
    };
  };
}

// 测试代码
(function() {
  const cf = new JsClassFactory();
  cf.addAttribute('age', 35);
  cf.addAttribute('name', 'chehimi');
  cf.addMethod('myName', function() {
    console.log('i am %s', this.name);
  });
  cf.addMethod('myAge', function() {
    console.log('my age is', this.age);
  });

  let z = cf.getClass()();
  z.myName(); // 输出: i am chehimi
  z.myAge();  // 输出: my age is 35

  cf.addAttribute('name', 'ali');
  cf.addAttribute('age', 15);

  let t = cf.getClass()();
  t.myName(); // 输出: i am ali
  t.myAge();  // 输出: my age is 15
})();

方案优势： #

• 完全不需要类和继承，代码更简洁
• 实例是纯对象，没有原型链的额外开销
• 逻辑直观，容易理解和维护

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