The JavaScript Diaries: Part 6/Page 2

The JavaScript Diaries: Part 6

Creating Objects

A basic way to create an object is with the use of the new reserved word and the Object() constructor. Here is a basic custom object:

  var guitar = new Object();
  guitar.maker = "Gibson";
  guitar.model = "Les Paul";
  guitar.color = "Sunburst";
  alert(guitar.color+" "+guitar.maker+" "+guitar.model);

As I said, this is pretty basic but let's take a look at what we did.

First, we created a variable, guitar and, using the new reserved word and the Object() constructor, we created a new instance of it
Next, we added properties and assigned values to them, using the dot operator:
guitar.maker = "Gibson";

guitar.model = "Les Paul";

guitar.color = "Sunburst";
Basically, we created an instance (a copy, if you will), of an object (a "thing") and stored it in the computer's memory (RAM). We then told the computer that the object had certain properties. Using the dot operator, we then linked those properties to the object that is in memory.
Finally, we called the object using an alert window, alert(guitar.color+" "+guitar.maker+" "+guitar.model);

The Constructor Function

Here is a basic function with a few changes in the layout of the code. Using our example above, the constructor function would be created in the following manner:

  function guitar(maker,model,color) {
    this.maker=maker;
    this.model=model;
    this.color=color;
  }

Let's look at this in more detail:

We used the function reserved word to create a function called guitar.
Next, we assigned parameters to the function: maker, model, and color.
We then assigned those parameters to properties by the same name.
1. The properties are assigned using the this reserved word. The statement says "use the instance of the parameter contained in this object," e.g.:
- Create a property called maker, using the parameter maker from this object
- Create a property called model, using the parameter model from this object
- Create a property called color, using the parameter color from this object

That's it! We wrote a constructor function to create an object called guitar and gave it properties. Now in order to use the object, we need to create an instance of it using the new reserved word. We can do that as follows:

  var myFav = new guitar("Gibson","Les Paul","Sunburst");

Let's see what's happened here:

First, we declared a variable called myFav
Next, we did two things, which happen at the same time:
1. We created a new instance of the guitar object using the new reserved word.
2. We initialized it using a function call to the guitar constructor function, assigning the string Gibson to the maker parameter, the string Les Paul to the model parameter, and the string Sunburst to the color parameter.

Note: In step 2b above I mentioned that we made a function call. In our previous study on functions I said that parameters could be used to import values from outside the function. That's exactly what we did here. The actual function call is: guitar() and then we added parameters to it so it looked like this:

  guitar("Gibson","Les Paul","Sunburst");

So far so good. First, we created an object using the constructor function and we gave it three parameters. We then created properties using the parameters. Next, we created a new instance of the object, assigning different parameters to the properties. Now, we need to write some code to use those properties.

  alert("I want a "+myFav.color+" "+myFav.maker+" "+myFav.model);

This should be pretty simple:

We created an alert window, giving it the following strings:

"I want a "
which was concatenated to the color property of the new instance of the guitar object, myFav.color.
That was then concatenated to a string with a blank space.
Next, concatenated to that was the maker property of the new instance of the guitar object, myFav.maker.
Once again, another string with a blank space.
Finally, concatenated to that was the model property of the new instance of the guitar object, myFav.model.

That's it! Let's try one with more detail.

[previous] [next]

Created: July 1, 2005

URL:

The JavaScript Diaries: Part 6/Page 2