JavaScript动态创建对象实例的方法

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript动态生成对象实例的技巧》，聊聊，我们一起来看看吧！

本文旨在探讨如何在JavaScript中根据数组中的值动态创建类的实例。我们将分析直接动态命名变量的局限性，并提供两种推荐的解决方案：将实例存储在数组中（使用for...of循环和Array.prototype.map）以及将实例存储在对象中（通过ID作为键），从而实现灵活且可维护的对象管理。

理解动态变量命名的局限性

在JavaScript中，我们不能直接使用字符串或变量的值来动态创建并命名一个新的变量。例如，如果有一个字符串"mass"，你无法通过类似let "mass" = new Input_for_calc('mass');的方式来声明一个名为mass的变量。JavaScript的变量声明（let, const, var）需要在代码编写时确定其名称，而不是在运行时动态生成。

原始需求中，开发者希望通过数组中的每个ID（如"mass"）来自动生成一个同名的变量，例如：

let mass = new Input_for_calc('mass');
let mol_mass = new Input_for_calc('mol_mass');
// ...等等

这种直接通过循环动态声明变量名的做法在JavaScript中是不被允许的。尝试这样做会导致语法错误或不符合预期的行为。

基础类定义

为了更好地演示，我们首先定义一个示例类Input_for_calc，它封装了对DOM元素的查询和操作：

class Input_for_calc {
    constructor(id) {
        // 构造函数接收一个ID，并将其转换为CSS选择器
        this.id_obgect = "#" + id;
    }

    // 获取对应的DOM元素
    document_qs() {
        return document.querySelector(this.id_obgect);
    }

    // 将DOM元素的显示样式设置为'block'
    style_block() {
        const element = this.document_qs();
        if (element) {
            element.style.display = "block";
        }
    }

    // 将DOM元素的显示样式设置为'none'
    style_none() {
        const element = this.document_qs();
        if (element) {
            element.style.display = "none";
        }
    }

    // 获取DOM元素的当前值
    value() {
        const element = this.document_qs();
        return element ? element.value : undefined;
    }
}

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

策略一：将实例存储在数组中

最直接且通用的方法是将所有创建的实例收集到一个数组中。这种方法适用于当你需要迭代所有实例，或者它们的访问顺序不重要时。

1.1 使用 for...of 循环

for...of 循环提供了一种简洁的方式来遍历可迭代对象（如数组）的元素。在每次迭代中，我们可以创建一个新的Input_for_calc实例并将其添加到预先定义的数组中。

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

// 遍历ID数组，为每个ID创建一个实例并添加到数组中
for (const id of oll_calc_input_id) {
    inputInstancesArray.push(new Input_for_calc(id));
}

console.log(inputInstancesArray);
// 结果示例：
// [
//   Input_for_calc { id_obgect: '#mass' },
//   Input_for_calc { id_obgect: '#mol_mass' },
//   // ... 其他实例
// ]

通过这种方式，你可以通过索引访问这些实例，例如 inputInstancesArray[0] 会是 mass 对应的实例。

1.2 使用 Array.prototype.map()

Array.prototype.map() 方法是处理此类转换的理想选择。它会遍历数组的每个元素，对每个元素执行一个回调函数，并将回调函数的返回值组成一个新的数组。这使得代码更加简洁和函数式。

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

console.log(inputInstancesMap);
// 结果与 for...of 循环类似：
// [
//   Input_for_calc { id_obgect: '#mass' },
//   Input_for_calc { id_obgect: '#mol_mass' },
//   // ... 其他实例
// ]

map() 方法通常被认为是更优雅和现代的JavaScript写法，尤其适用于这种“一对一转换”的场景。

策略二：将实例存储在对象中（按ID访问）

如果你的需求是能够通过其原始ID（如"mass"）直接访问对应的实例，那么将实例存储在一个JavaScript对象中是更好的选择。这种方法允许你像访问对象属性一样访问每个实例，例如 inputs.mass 或 inputs['mol_mass']。

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

// 遍历ID数组，将每个ID作为键，对应的实例作为值存储到对象中
for (const id of oll_calc_input_id) {
    inputInstancesObject[id] = new Input_for_calc(id);
}

console.log(inputInstancesObject);
// 结果示例：
// {
//   mass: Input_for_calc { id_obgect: '#mass' },
//   mol_mass: Input_for_calc { id_obgect: '#mol_mass' },
//   volum: Input_for_calc { id_obgect: '#volum' },
//   calculate: Input_for_calc { id_obgect: '#calculate' },
//   widp: Input_for_calc { id_obgect: '#widp' }
// }

// 示例：如何通过ID访问特定的实例
console.log(inputInstancesObject.mass);      // 访问 'mass' 对应的实例
console.log(inputInstancesObject['mol_mass']); // 访问 'mol_mass' 对应的实例

这种方法完美地解决了原始问题中希望通过名称直接访问实例的需求，因为它将ID映射为对象的属性名，从而实现了动态的、键值对的实例存储和访问。

最佳实践与注意事项

1. 避免创建全局变量： 将实例直接作为window对象的属性（如window[id] = new Input_for_calc(id)）虽然能实现类似动态命名的效果，但会污染全局作用域，增加命名冲突的风险，并使代码难以维护和调试。这通常被认为是不推荐的做法。始终将你的实例封装在局部作用域的数组或对象中。

2. 选择合适的数据结构：

   • 使用数组 (inputInstancesArray 或 inputInstancesMap)：当你需要对所有实例进行统一处理（如遍历、过滤、排序），或者通过索引访问它们时，数组是最佳选择。
   • 使用对象 (inputInstancesObject)：当你需要通过特定的标识符（ID）快速、直接地访问某个实例时，对象是更优的选择。它提供了类似于哈希表的查找效率。

3. 代码可读性和维护性： Array.prototype.map()通常比for...of循环更具声明性，因为它明确表达了“转换一个数组到另一个数组”的意图。然而，对于将实例存储到对象中的情况，for...of循环是更直接的实现方式。

总结

动态创建类实例并管理它们是JavaScript开发中常见的需求。通过将实例存储在数组或对象中，我们可以有效地解决动态变量命名的问题，并根据实际的访问模式选择最合适的数据结构。无论是需要批量处理的数组，还是需要通过唯一标识符快速查找的对象，JavaScript都提供了灵活且强大的工具来满足这些需求，同时遵循最佳实践，避免污染全局作用域。

好了，本文到此结束，带大家了解了《JavaScript动态创建对象实例的方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！