从 DOM 输入元素动态创建现有类的新 JS 对象实例答案

【问题标题】：Create a new JS object instance of an existing class dynamically from a DOM input element从 DOM 输入元素动态创建现有类的新 JS 对象实例
【发布时间】：2020-08-15 02:49:16
【问题描述】：

在 HTML 的 Javascript 中，如何创建一个类的新对象实例，其中类中新对象的对象名称/变量名称来自输入元素的文本值？

在这个例子中... 我有一个名为 myClass 的类，我创建了一个名为 Chickens 的 myClass 对象实例，其属性“myProperty”的值为 100。假设我想在浏览器中使用名称输入元素来创建一个新的 myClass 对象实例，例如Dogs 并使用属性输入元素将其 myProperty 值设置为 49。

这是我的例子：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input id="name" placeholder="name">
        <input id="property" placeholder="property">
        <button id="btn"></button>
    </body>
    <script src="rhythm-class.js"></script>
</html>

和

function myClass() {
        this.myProperty
}

let chickens = new myClass()

chickens.myProperty = '100'

console.log(chickens)

let currObj = null
let currProp = null

document.querySelector('#name').addEventListener('change', (e)=> {
        console.log(e.target.value)
        currObj = e.target.value
        let `${e.target.value}` = new myClass
})
document.querySelector('#property').addEventListener('change', (e)=> {
        console.log(e.target.value)
        currentProp = e.target.value
        let `${currentObj}`.testProperty = e.target.value
})
document.querySelector('#btn').addEventListener('click', ()=> {
        console.log(`${currentObj}`.testProperty)
})

【问题讨论】：

dogs.myProperty=document.getElementById("property").value 应该为您检索一个值。
如何通过在名称输入元素中输入狗来创建狗？
从获取名称输入中您能做的最多的事情就是创建一个具有该值的字符串变量的类。
您不能动态创建变量名。你真正想要的是将你的类的实例放在一个对象或Map 中，你可以在其中给每个实例起自己的名字。不要以let dog = new myClass, cat = new myClass;开头，而是以const animals = {dog: new myClass, cat: new myClass};开头

标签： javascript html class object dom-events

【解决方案1】：

function myClass(value) {
  this.myProperty = value;
}

let chickens = new myClass("100");

console.log(chickens);

let form = document.querySelector("form");
let inputs = form.elements;

form.addEventListener("submit", (e) => {
  e.preventDefault();
  let nameField = inputs["name"];
  let propField = inputs["property"];

  // you can test here if both of the values are set
  window[nameField.value] = new myClass(propField.value);
  console.log(window[nameField.value].myProperty);

});

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <form>
    <input id="name" placeholder="name">
    <input id="property" placeholder="property">
    <button id="btn">Submit</button>
  </form>
</body>

</html>

由于 JS 中的每个变量都是全局对象的属性，我们可以在这里使用它。请注意，全局对象是window。我们将全局对象的属性名称设置为我们的实例名称，然后实例化传递我们输入值的类。

建议您使用本地对象来存储变量名，而不是使用全局对象。

【讨论】：

这似乎是我想要的，只是我使用了一个本地数组而不是窗口并且它有效！
我已经应用了这个概念，并希望对原型函数和
如果您使用本地数组，您只存储结果，以后将无法检索。所以我建议您使用本地对象将变量名称映射到结果。无论如何，如果答案对您有帮助，您可以选择它作为接受的答案。