JavaScript 中动态创建和管理对象实例的策略

DDD 2025-08-05 15:12 705浏览原创

本文旨在探讨在JavaScript中如何根据数组中的值动态创建类的多个实例。我们将介绍两种主流且推荐的策略：将实例存储在数组中，可以使用for...of循环或更简洁的Array.prototype.map方法；或者将实例存储在一个对象（哈希映射）中，以便通过键名直接访问。文章将提供详细的代码示例，并强调避免全局变量污染等最佳实践，帮助开发者高效、规范地管理动态生成的对象集合。

在javascript开发中，我们经常会遇到需要根据一组数据（例如id列表、配置项等）来动态创建多个对象实例的场景。传统的做法是手动为每个实例声明一个变量，例如 let mass = new input_for_calc('mass');。然而，当数据量较大或数据来源是动态时，这种手动方式显然效率低下且难以维护。开发者往往会尝试使用循环来自动化这一过程，但可能会遇到如何为动态生成的实例赋予变量名的问题，例如尝试 let ? = new input_for_calc('id');。直接在循环内部动态创建全局变量名是一种不推荐的做法，因为它会导致全局作用域污染，增加命名冲突的风险，并降低代码的可维护性。

本教程将介绍两种更规范、更健壮的策略来解决这个问题：将动态创建的实例存储在一个数组中，或者存储在一个对象（哈希映射）中。

定义基础类

首先，我们定义一个用于创建实例的基础类 Input_for_calc。这个类接收一个 id 作为构造参数，并包含一些模拟DOM操作的方法。

class Input_for_calc {
    constructor (id) {
        // 存储带有 '#' 前缀的ID，通常用于querySelector
        this.id_obgect = "#" + id;
    }

    // 查询DOM元素（注意：此方法当前未返回查询结果）
    document_qs() {
        document.querySelector(`${this.id_obgect}`);
    }

    // 设置元素的显示样式为 'block'
    style_block() {
        document.querySelector(`${this.id_obgect}`).style.display = "block";
    }

    // 设置元素的显示样式为 'none'
    style_none() {
        document.querySelector(`${this.id_obgect}`).style.display = "none";
    }

    // 获取元素的当前值（注意：此方法当前未返回获取的值）
    value() {
        document.querySelector(`${this.id_obgect}`).value;
    }
}

// 假设我们有一组需要创建实例的ID
let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

请注意，document_qs() 和 value() 方法在当前实现中并没有返回任何值，也没有将查询到的元素或值存储在实例属性中，这可能不是预期行为。在实际应用中，你可能需要根据需求修改它们以返回或存储相关信息。本教程的重点在于实例的动态创建和管理。

策略一：使用数组存储对象实例

当我们需要一个有序的集合，或者主要通过索引来访问这些实例时，将它们存储在一个数组中是最佳选择。

方法一：使用 for...of 循环

for...of 循环提供了一种简洁的方式来遍历可迭代对象（如数组），并对每个元素执行操作。我们可以利用它来遍历ID数组，并为每个ID创建一个 Input_for_calc 实例，然后将其添加到新数组中。

// 创建一个空数组来存储Input_for_calc实例
let objs = [];

// 遍历ID数组，并为每个ID创建一个新实例
for (const input of oll_calc_input_id) {
    objs.push(new Input_for_calc(input));
}

// 打印结果，可以看到objs现在是一个包含Input_for_calc实例的数组
console.log(objs);

// 示例：访问数组中的第一个实例
// console.log(objs[0]); // 对应 'mass' 的实例
// 示例：调用实例的方法
// objs[0].style_block(); // 假设页面中存在id为'mass'的元素

这种方法直观易懂，适用于任何需要迭代并收集结果的场景。

方法二：使用 Array.prototype.map

对于将一个数组中的每个元素转换（映射）成另一个新元素并形成一个新数组的需求，Array.prototype.map 是更具函数式编程风格且更简洁的选择。它专门为此目的而设计。

// 使用 map 方法直接将ID数组转换为Input_for_calc实例数组
let mappedObjs = oll_calc_input_id.map(input => new Input_for_calc(input));

// 打印结果，mappedObjs与上面for...of循环得到的objs相同
console.log(mappedObjs);

// 示例：访问数组中的第二个实例
// console.log(mappedObjs[1]); // 对应 'mol_mass' 的实例

map 方法的代码更紧凑，表达意图更清晰，是处理此类转换任务的首选。

策略二：使用对象（哈希映射）存储对象实例

有时，我们可能希望通过一个有意义的键名（例如ID本身）来直接访问特定的实例，而不是通过数字索引。在这种情况下，将实例存储在一个普通JavaScript对象（作为哈希映射或字典）中是更合适的选择。

// 创建一个空对象来存储Input_for_calc实例
let inputs = {};

// 遍历ID数组，并使用ID作为键名，将新实例作为值存储到对象中
for (const input of oll_calc_input_id) {
    inputs[input] = new Input_for_calc(input);
}

// 打印结果，inputs现在是一个键值对为 'ID: Input_for_calc实例' 的对象
console.log(inputs);

// 示例：通过键名直接访问实例
console.log(inputs.mass);      // 访问 'mass' 对应的实例
console.log(inputs.mol_mass);  // 访问 'mol_mass' 对应的实例

// 示例：调用特定实例的方法
// inputs.mass.style_block(); // 假设页面中存在id为'mass'的元素

这种方法允许你像访问对象属性一样，通过实例的原始ID来访问它，例如 inputs.mass 或 inputs['mol_mass']。这对于需要根据特定标识符快速查找和操作实例的场景非常有用。

注意事项与最佳实践

避免全局变量污染： 绝对不要尝试通过 window[variableName] = new Class() 的方式来动态创建全局变量。这会导致全局作用域变得混乱，增加命名冲突的风险，并使代码难以理解和维护。本教程中介绍的数组和对象存储方式是更安全、更推荐的做法。
选择合适的存储结构：
- 如果实例之间存在逻辑上的顺序关系，或者你需要频繁地遍历所有实例，或者通过索引访问，那么数组是更好的选择。
- 如果每个实例都有一个唯一的、有意义的标识符，并且你需要通过这个标识符快速查找和访问特定实例，那么对象（哈希映射）是更优的选择。
代码可读性与维护性： 使用 Array.prototype.map 通常能使代码更简洁、意图更清晰，尤其是在进行一对一转换时。而 for...of 循环则提供了更大的灵活性，可以在循环体内执行更复杂的操作。选择哪种方式取决于具体的业务逻辑和个人偏好。
方法链与返回值： 在 Input_for_calc 类中，document_qs() 和 value() 方法没有返回查询到的DOM元素或其值。在实际应用中，如果希望这些方法能够被链式调用或提供数据，需要确保它们有合适的返回值。例如：
```
document_qs() {
    return document.querySelector(`${this.id_obgect}`);
}
value() {
    const element = this.document_qs();
    return element ? element.value : undefined;
}
```