Javascript - How can I dynamically create objects during runtime? - Stack Overflow

admin管理员组

文章数量:1421000

I have a constructor:

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

I can make a new object like so:

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

If I wanted to have someone click a button, and make new objects dynamically from that button click, how would I go about doing so? I don't want the 'core' object (carMustang) to change, but rather have the option for the user to change the options for their own 'personal' instance of the object. Also, they will need to create multiple instances of the same object, able to change the properties at will- all without affecting the 'core' object defined in code.

I have a constructor:

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

I can make a new object like so:

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

If I wanted to have someone click a button, and make new objects dynamically from that button click, how would I go about doing so? I don't want the 'core' object (carMustang) to change, but rather have the option for the user to change the options for their own 'personal' instance of the object. Also, they will need to create multiple instances of the same object, able to change the properties at will- all without affecting the 'core' object defined in code.

• javascript
• object
• constructor

Share Improve this question Follow asked Jul 22, 2017 at 15:04 KoltenKolten 3,50366 gold badges4444 silver badges6060 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Declare a Array to hold all the created cars and make the button on click event call a function that creates a new instance and adds it to the array.

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>

Your variable cars will hold all the created objects and you can retrive them and edit their properties if you want.

Have users create their own copy of carMustang like this

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

    }

You might have to clone also objects that are referenced by carMustang

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

You can also deepclone carMustang with lodash's clonedeep.

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

You can clone the object:

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

Why not just create a "custom constructor" that you call from the click handler?:

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

    return baseMustang;
}

Then the caller can make any changes that they want:

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

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

You could also use a library like Immutable.js to make the "template car" immutable and make modified copies of it.

本文标签： JavascriptHow can I dynamically create objects during runtimeStack Overflow