JavaScript中导出实例化类的替代方案及实现合理性确认

你提出的这种导出方式是合理的替代方案，符合不直接导出类实例的最佳实践，不过先得修正RouterConfig类里的一个关键问题——你的类构造函数里没有把header和parameters赋值给实例属性，但generateURL方法里却用到了this.header和this.parameters，这会导致运行时报错。

你的方案为什么可行 #

• 导出独立的属性和绑定后的方法，避免了外部直接修改整个实例带来的意外副作用，比如外部随意篡改实例的内部状态
• 通过generateURL.bind(route2)确保了方法调用时this的指向正确，不会出现上下文丢失导致的错误

可以优化的地方 #

1. 修复RouterConfig类的问题 #

首先要在构造函数里把header和parameters存到实例上，同时补充类型声明：

export default class RouterConfig{
    constructor(header = '', parameters = []){
        this.header = header;
        this.parameters = parameters;
        this.path = parameters.reduce((accumulator, current) => `${accumulator}/:${current}`, header)
    }

    header: string;
    parameters: string[];
    path: string;

    generateURL(data = {}){
        return this.parameters.reduce((accumulator, current) => `${accumulator}/${data[current]}`, `/${this.header}`)
    }
}

2. 改用工厂函数（更推荐） #

如果你的场景只是生成路由配置，不需要类的继承等特性，用工厂函数会更简洁，还能避免手动绑定this的麻烦：

export function createRouterConfig(header = '', parameters = []) {
    const path = parameters.reduce((acc, curr) => `${acc}/:${curr}`, header);
    const generateURL = (data = {}) => {
        return parameters.reduce((acc, curr) => `${acc}/${data[curr]}`, `/${header}`);
    };
    return {
        header,
        parameters,
        path,
        generateURL
    };
}

// 导出时直接解构
const route2 = createRouterConfig('def', ['param_G']);
export const { header, parameters, path, generateURL } = route2;

内容的提问来源于stack exchange，提问作者aii-yin