6

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.

4 Answers 4

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.

Sign up to request clarification or add additional context in comments.

4 Comments

I like this method thanks - I noticed your createCar() function call doesn't have any parameters - any idea how I can dynamically pass the parameter based upon the text of the button? I have a method but it uses eval() :(
Can you use jQuery? Because using jQuery().on('click') is a lot easier than using eventListeners or other bare javascript methods
Actually I just find out that you can use the DOM elements properties like this: <button onclick="createCar(this.innerHTML, 250, ['Cruise Control','Air Conditioning', 'ABS'])">Mustang</button>
yes, I could use jQuery, but I would like to keep this basic for now in order to understand the class-object model. that works thanks.
0

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);
}

2 Comments

How might I reference the copies later? What if the user creates multiple different copies - how can I reference those?
why don't you push each copy in an array of in some hash table ?
0

You can clone the object:

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

1 Comment

Unfortunately I wouldn't know how to reference this later - especially if multiple copies are created by the user (?)
0

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.

1 Comment

I am not sure how to create multiple copies with this method (?) also how can I reference them later? I looked at immutable.js thanks - looks too complicated for me heh. very interesting though - you got me off on a tangent of blogs and youtube videos on it :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.