如何用for...of循环根据数组值批量创建JavaScript实例对象

问题背景 #

我有以下ID数组和Input_for_calc类，想自动批量创建类似let mass = new Input_for_calc('mass');的实例，尝试用for...of循环实现但未成功，核心问题是无法将数组元素作为实例变量名使用，求可行的解决方案。

原代码如下：

let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

class Input_for_calc {
    constructor (id) {
        this.id_obgect = "#" + id;
    }
    document_qs() {
        document.querySelector(`${this.id_obgect}`);
    }
    style_block() {
        document.querySelector(`${this.id_obgect}`).style.display = "block";
    }
    style_none() {
        document.querySelector(`${this.id_obgect}`).style.display = "none";
    }
    value() {
        document.querySelector(`${this.id_obgect}`).value;
    }
};

let mass = new Input_for_calc('mass');

解决方案一：用对象统一存储实例（推荐） #

不要直接创建零散的全局变量，而是把所有实例存入一个对象中，通过对象属性名（对应数组里的ID）来访问实例，既避免全局作用域污染，又方便统一管理。

同时先修复原类的两个问题：

1. 原方法document_qs和value没有返回值，调用后拿不到结果；
2. 每次方法调用都重复查询DOM，效率低下，建议在构造函数中一次性获取DOM元素。

优化后的完整代码：

let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

class Input_for_calc {
    constructor(id) {
        // 构造时一次性获取DOM元素，后续复用
        this.element = document.querySelector(`#${id}`);
        // 可选：元素不存在时给出警告
        if (!this.element) {
            console.warn(`未找到ID为${id}的元素`);
        }
    }
    style_block() {
        // 用可选链避免元素不存在时报错
        this.element?.style.display = "block";
    }
    style_none() {
        this.element?.style.display = "none";
    }
    value() {
        return this.element?.value;
    }
};

// 批量创建实例并存储到对象中
const inputInstances = {};
for (const id of oll_calc_input_id) {
    inputInstances[id] = new Input_for_calc(id);
}

// 使用示例
inputInstances.mass.style_block(); // 显示mass元素
console.log(inputInstances.mol_mass.value()); // 获取mol_mass元素的值

解决方案二：动态创建全局变量（不推荐） #

如果一定要直接创建对应数组元素名称的全局变量，可以在浏览器环境中通过window对象实现（全局变量本质是window的属性），但这种方式容易引发命名冲突，不建议在复杂项目中使用。

代码示例：

// 批量创建全局变量
for (const id of oll_calc_input_id) {
    window[id] = new Input_for_calc(id);
}

// 直接访问全局变量
mass.style_none(); // 隐藏mass元素
console.log(volum.value()); // 获取volum元素的值

内容的提问来源于stack exchange，提问作者Максим Однорал