Javascript - 如何在运行时动态创建对象？

Question

我有一个构造函数：

function car(name, speed, options){
  this.name = name;
  this.speed = speed;
  this.options = options;
}

我可以这样创建一个新对象：

var carMustang = new car("Mustang", 250, ["Cruise Control","Air Conditioning", "ABS"]);

如果我想要让某人点击一个按钮，并从该按钮点击中动态创建新对象，我该如何做呢？ 我不希望“核心”对象（carMustang）发生变化，而是让用户有选择地更改其自己的“个人”对象的选项。 另外，他们需要创建多个相同对象的实例，能够随意更改属性-所有这些都不会影响在代码中定义的“核心”对象。

- Kolten

Answer 1

声明一个数组来存储所有创建的汽车，并使按钮点击事件调用一个函数，创建一个新实例并将其添加到数组中。

Javascript

var cars = []
function car(name, speed, options){
  this.name = name;
  this.speed = speed;
  this.options = options;
}

function createCar(name, speed, options) {
    cars.push(new car(name, speed, options))
}

HTML

<button onclick="createCar('Mustang', 250, ['Cruise Control','Air Conditioning', 'ABS'])">Create Car</button>

你的变量cars将包含所有创建的对象，如果需要，你可以检索它们并编辑它们的属性。

- Danilo Favato

---

我喜欢这个方法，谢谢 - 我注意到你的createCar()函数调用没有任何参数 - 你有什么想法可以根据按钮文本动态传递参数吗？我有一个方法，但它使用了eval() :( - Kolten

你会使用jQuery吗？因为使用jQuery().on('click')比使用eventListeners或其他原生javascript方法要容易得多。 - Danilo Favato

其实我刚刚发现你可以像这样使用DOM元素属性：<button onclick="createCar(this.innerHTML, 250, ['Cruise Control','Air Conditioning', 'ABS'])">Mustang</button> - Danilo Favato

是的，我可以使用jQuery，但为了理解类-对象模型，我现在想保持基本。好的，谢谢。 - Kolten

Answer 2

为什么不直接创建一个“自定义构造函数”，然后从单击处理程序中调用它呢？

function newBaseMustang() {
    var baseMustang = new car("Mustang", 250, ["Cruise Control","Air Conditioning", "ABS"]);

    return baseMustang;
}

然后调用方可以进行任何想做的更改：

var mustang1 = newBaseMustang();
mustang1.speed += 100;

var mustang2 = newBaseMustang();
mustang2.name = "MyMustang";

你也可以使用像Immutable.js这样的库来使“模板车”不可变，并创建修改后的副本。

- Carcigenicate

---

我不确定如何使用这种方法创建多个副本(?)，也不知道之后怎么引用它们？ 我看了一下immutable.js，谢谢 - 但对我来说似乎太复杂了。虽然很有趣 - 你让我沉迷在博客和YouTube视频中 :) - Kolten

Answer 3

让用户像这样创建自己的carMustang

    click () {
       let userCopy = Object.assign({}, carMustang);
        // then mutate userCopy the way you want 

    }

你可能还需要克隆被 carMustang 引用的对象

click () {
   let userCopy = Object.assign({}, carMustang, { options: [...carMustang.options]});
}

你也可以使用 Lodash 的 clonedeep 进行深度克隆 carMustang。

click () {
   let userCopy = _.cloneDeep(carMustang);
}

- Lev

---

我如何稍后引用这些副本？如果用户创建了多个不同的副本，我如何引用它们？ - Kolten

为什么不将每个副本推入数组或哈希表中？ - Lev

Answer 4

您可以克隆对象：

var carMustang = new car("Mustang", 250, ["Cruise Control","Air Conditioning", "ABS"]);
var copy = Object.assign({}, carMustang);
console.log(copy);

- Eduardo Melo

---

不幸的是，我不知道以后如何引用它 - 特别是如果用户创建了多个副本 (?) - Kolten