With JavaScript, you are not limited to just those objects that are built into the language itself, you can define your own objects as well. There are two simple ways of creating a new object, we'll call these the long way and the short way (there are several other ways to create an object but they are generally either out of favour or have problems and so their use should be avoided). We'll initially look at how to define the object itself along with a few properties, we'll look at adding some methods later in the tutorial. First let's look at the long way:
function MyObject(p1,p2,p3) {
this.prop1 = p1;
this.prop2 = p2;
this.prop3 = p3;
}
var myNewObj = new MyObject('x','y','z');
You will notice that this code uses the this keyword. All the references to 'this' within the code that we have here references the new object that is being created and thus allows us to add properties to the object. It is in fact the use of the 'this' keyword that distinguishes the definition of our object from that of an ordinary function. The other thing that distinguishes an object from a function is the use of the keyword new when you call the code.
The shorter way of defining our new object is:
function MyObject(p1,p2,p3) {
return {prop1:p1, prop2:p2, prop3:p3};
}
var myNewObj = new MyObject('x','y','z');
This code does exactly the same as the earlier version except for being a lot shorter.
So now we have a new type of object that has some properties attached. The next thing we need to look at is how we can modify our object creation to add some methods as well. Of course you already know the easiest way of adding a method to an existing object.
function MyObject(p1,p2,p3) {
this.prop1 = p1;
this.prop2 = p2;
this.prop3 = p3;
}
MyObject.prototype.meth1 = function () {
return this.prop1 + this.prop2;
}
var myNewObj = new MyObject('x','y','z');
We can mix and match by using that same approach to add the method to an object defined the shorter way.
function MyObject(p1,p2,p3) {
return {prop1:p1, prop2:p2, prop3:p3};
}
MyObject.prototype.meth1 = function () {
return this.prop1 + this.prop2;
}
var myNewObj = new MyObject('x','y','z');
There is a way of defining methods within the object definition itself with both of the ways that we have looked at for defining our objects however doing so has one major problem. Defining the method within the object constructor (as that function statement is called) will create a separate copy of the method every time that we create a new copy of the object. Adding the methods after the object constructor using the prototype keyword means that there will be only one copy of the method created and it will be shared between all copies of the object.
If you think about it carefully you will easily see that while we need each copy of an object to have its own copy of all the properties so that each can have different values stored in those properties, only one copy of the methods is required since the purpose of methods is to define allowable actions and not to store any information. Defining multiple copyes of fields to store values in where we have multiple values to store is useful. Defining multiple copies of the instructions on how to perform an action is not.
There is one more alternative in all this which is occassionally useful and that is to define a property that is shared between all of the copies of an object rather than allowing each copy of the object to have its own. An example of this would be if we want to have a property that stores the number of copies of the object which exist. To do this we need to define the property outside of the object constructor as well (and if we want to automatically count how many of the object we've created we'd add that inside the constructor.
function MyObject(p1,p2,p3) {
MyObject.count++;
return {prop1:p1, prop2:p2, prop3:p3};
}
MyObject.count = 0;
MyObject.prototype.meth1 = function () {
return this.prop1 + this.prop2;
}
var myNewObj = new MyObject('x','y','z');
This covers how to define your own objects and to then create copies of them. I am not going to cover how you reference the properties and methods of the object in your processing because you already know how to do that as it works exactly the same way for the objects you define yourself as it does for the ones that JavaScript defines for you.
By substituting your own object name, propery names, and method names and replicating the code as needed and uinserting the appropriate code to perform the required actions into the methods, you can easily create and use your own methods.
More of This Tutorial
- 1 Hello World
- 2 Events
- 3 Visitor Triggered Events
- 4 Timed Events
- 5 Testing Conditions
- 6 Feature Sensing
- 7 Alternate Tag Location
- 8 Functions and Methods
- 9 Passing Parameters
- 10 Variables/Properties
- 11 Objects
- 12 Arrays
- 13 Nodelists
- 14 Loops
- 15 Numbers
- 16 Strings
- 17 Dates
- 18 Alert
- 19 Other Objects
- 20 Extending Objects
- 22 Collision Proofing
- 23 JavaScript and Forms
- 24 Updating the Web Page
- 25 Obsolete JavaScript
