The entire JavaScript language is based around Objects and yet there are many people writing simple JavaScript code using classical obtrusive techniques who have no idea what an object is and have certainly never knowingly used one in their code. Of course they are unknowingly using them all the time since as discussed in prior tutorials, every function and variable in JavaScript are actually methods and properties of a JavaScript object - often the Window object.


We'll leave discussion of the Window object until later though and start by looking at the simplest object that is predefined in JavaScript - the Object.

JavaScript Objects with the exception of the Object object itself are all basically extensions of that object and so an understanding of the Object object is the first step in being able to understand both how the predefined objects work as well and how to extend them, as how to define your own objects.

The first thing we are going to look at with objects is how to define our own alternative names to refer to existing objects as well as how to make a copy of an object. The following code sets o as an alternative name to reference Object and obj as a completely separate object.

var o = Object;var obj = new Object;
As you can see the difference between creating a reference to an existing object and creating a copy of an object is the absence or presence of the reserved word new.

Since all JavaScript objects (with the exception of the Global object) are derived from the Object object, all objects will have access to the properties and methods that an Object has.

It is therefore extremely useful to know what these properties and methods are and what they do since you can use them with every object you have in your code including all of those built into JavaScript itself.

A JavaScript object always has the following properties:

• constructor provides a reference to the function used to create the object. for the Object object this points to the Object() function,
• prototype provides a reference to the object prototype for the object. In practice this allows us to share methods between objects without having to have a separate copy of the method in each object.

A JavaScript object also has the following methods:

• toString() converts the content of the object into a text string. The exact means for doing so will vary depending on the object. In the case of the Object object the text string to be returned is not defined in the standards and so can vary between JavaScript implementations.
• toLocaleString() a locale specific version of toString()
• valueOf() returns the most appropriate primitive value to represent the object (such as a number or text string). Where a text string is the most appropriate representation (as it will be in most cases) this method may or may not return the same value as toString().
• hasOwnProperty(propertyname) when a text string is passed to this method, the method will return true or false depending on whether or not a property by that name exists within this object.
• isPrototypeOf(object) returns true or false depending on whether or not this object is a protptype for the specified one.
• propertyIsEnumerable(propertyname) returns true if the property will be processed if a for/in loop (to be covered later) and false if the property will be excluded from processing in such a loop. Most predefined properties will return false while those you define yourself will always return true.

All of the objects that you create for yourself in JavaScript will be created by taking a copy of a predefined object (usually Object) and then adding your own properties and methods to it. You can also extend the functionality of the predefined objects by adding methods to them the same way as you add them to your new objects. The next thing we need to consider then is how we add properties and methods to an object. We have actually already looked at one way of doing this in the prior tutorials on functions and variables.

var myobj = new Object;myobj.prototype.mymethod = function() {...} ;myobj.someProp = 7;
There are actually a couple of other ways that we can add properties and methods at the time when we create an object. The shortest way to do it is:

var myobj = {mymethod:myfunction,someProp:7}function myfunction() {...}
The braces {} are a JavaScript shortcut means of referencing an object.

The other way of creating our own new objects is to simply define them as functions (since all objects are also methods of a higher level object in JavaScript). Here's an object with two properties and two methods that has been created this way.

function AdBox() {this.width = 200;this.height = 60;this.text = "default ad text";this.prototype.move = function() {// code for move method goes here}this.prototype.display = function() {// code for display method goes here}}var myobj = new AdBox;
Note that we use the this reserved word to attach the properties and methods to whichever object is actually using the object definition.

You can of course combine these different ways for adding properties and methods to your objects.

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
• 12 Arrays
• 13 Nodelists
• 14 Loops
• 15 Numbers
• 16 Strings
• 17 Dates
• 18 Alert
• 19 Other Objects
• 20 Extending Objects
• 21 Creating Objects
• 22 Collision Proofing
• 23 JavaScript and Forms
• 24 Updating the Web Page
• 25 Obsolete JavaScript