如何在加载后为构造函数类添加静态属性，规避Webpack循环引用

针对Vue3项目中Webpack打包时模型类静态属性循环引用的问题，以下几种方案可以同时满足避免打包异常和内存只保留一份属性实例的需求：

方案一：惰性加载的静态Getter（推荐） #

将属性定义改为静态getter，第一次访问时初始化并缓存，既避开类定义阶段的循环引用，又保证内存中仅存一份实例：

class HorseModel extends Model {
    constructor(record, config = {}){
        super(record, config);
    }

    static get properties() {
        // 缓存已初始化的属性，避免重复创建
        if (!this._properties) {
            this._properties = {
                'rider': {type: RiderModel, nullable: true}
            };
        }
        return this._properties;
    }
}

class RiderModel extends Model {
    constructor(record, config = {}){
        super(record, config);
    }

    static get properties() {
        if (!this._properties) {
            this._properties = {
                'horse': {type: HorseModel, nullable: true}
            };
        }
        return this._properties;
    }
}

原理说明 #

静态getter的执行时机是第一次访问类名.properties时，此时两个类都已完成定义，不会触发Cannot access 'XXX' before initialization错误。_properties作为类的静态私有属性，每个类仅存一份，不会在实例中重复占用内存。Webpack打包时，类定义阶段没有直接引用对方的静态属性，因此不会出现循环引用导致的undefined问题。

方案二：批量注册静态属性（适合统一管理） #

将类定义与属性注册分离，在所有模型类定义完成后，手动挂载静态属性：

// 先定义基础类结构
class HorseModel extends Model {
    constructor(record, config = {}){
        super(record, config);
    }
}

class RiderModel extends Model {
    constructor(record, config = {}){
        super(record, config);
    }
}

// 所有类定义完成后，批量注册静态属性
HorseModel.properties = {
    'rider': {type: RiderModel, nullable: true}
};

RiderModel.properties = {
    'horse': {type: HorseModel, nullable: true}
};

原理说明 #

这种方式完全避开了类定义阶段的互相引用，Webpack打包时不会产生循环引用异常。静态属性直接挂载在类上，每个类仅存一份实例，内存占用最优。在Vue3项目中，可以把这段注册代码放在入口文件（如main.js）的DOM加载完成后执行，或者在模型文件末尾统一处理。

方案三：基类封装缓存逻辑（减少重复代码） #

如果有大量模型类继承自Model，可以在基类中封装通用的缓存逻辑，子类只需实现属性定义：

class Model {
    constructor(record, config = {}) {
        // 基类原有构造逻辑
    }

    // 基类提供统一的属性获取入口，自动缓存
    static get properties() {
        if (!this._properties) {
            this._properties = this.defineProperties();
        }
        return this._properties;
    }

    // 子类必须实现的抽象方法，返回属性定义
    static defineProperties() {
        throw new Error('子类必须实现defineProperties静态方法');
    }
}

// 子类实现属性定义
class HorseModel extends Model {
    constructor(record, config = {}){
        super(record, config);
    }

    static defineProperties() {
        return {
            'rider': {type: RiderModel, nullable: true}
        };
    }
}

class RiderModel extends Model {
    constructor(record, config = {}){
        super(record, config);
    }

    static defineProperties() {
        return {
            'horse': {type: HorseModel, nullable: true}
        };
    }
}

原理说明 #

基类的静态getter自动处理缓存逻辑，子类只需专注于属性定义。同样利用惰性加载避开循环引用，且每个类的属性实例仅存一份，代码复用性更高。

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