Creating Objects from Existing Objects

The easiest way to create a new object in JavaScript is to simply copy an existing object. To do this we simply use the new keyword when assigning the existing object to the new name so that it will create a new copy of the object rather than just creating a reference to the existing object. Of course doing this only allows us to copy objects that already exist and doesn't really allow us to create brand new objects that are not just copies of existing ones.

Actually you can create brand new objects using what you already know about copying and extending objects since the Object object contains just that functionality that is needed by all objects regardless of what we want the object to be. One way of creating brand new objects with their own unique properties and methods is to create a new object as a copy of the Object object and then extend that new object to add the properties and methods that the object requires.

For example if we want our new object to have two properties and one method that are unique to this new object we might create it using:


var newObj = new Object;
newObj.prop1 = 'something';
newObj.prop2 = 3;
newObj.prototype.meth1 = function () {...};

You would of course continue in just the same way to add all of the additional properties and methods that your object needs.

The Object object itself contains two methods toString() and valueOf() which you may also need to override in order to have them function correctly in the event that you wish to be able to display the "value" of your new object. If you never need to be able to do that then you can leave those methods alone and forget that they are there.

Creating new objects this way is the most verbose of the different ways that JavaScript provides for defining new objects and we'll look at ways of reducing the amount of code required to create an object in future tutorials. One thing worth considering though while we are still looking at this particular way of creating objects is that the Object object is not the only object that we can use as the starting point for creating new objects.

We can in fact use any existing object as the starting point for creating a new object in JavaScript and if you already have an object that provides part of the functionality that your new object requires then it will be easier to copy that object as the starting point for your new object so as to only need to define those properties and methods that your new object needs that are not already provided for by the object that you copied.

In copying existing objects you are not limited to just those that are built into JavaScript either. Once you have created your own object then that object is no different from any of the built in objects in so far as what you can do with it is concerned and you can build new objects based on objects that you have already created just as easily as you can build objects based on the built in ones.

The only difference between the built in objects and those that you define for yourself is that any methods that you define must be coded in JavaScript while those methods that are predefined with the JavaScript built in objects will have their processing hard coded into the browser and will therefore be able to be run directly rather than having to be interpreted into computer executable code the way JavaScript code is. For that reason the built in methods will always run at least as fast and usually much faster than methods that you create in JavaScript.