Creating Your Own Objects (JavaScript)

Other Versions

To create instances of your own objects, you must first define a constructor function for them. A constructor function creates a new object, giving it properties and, if appropriate, methods. For instance, the following example defines a constructor function for pasta objects. Notice the use of the this keyword, which refers to the current object.

Example

---

JavaScript

// pasta is a constructor that takes four parameters.
function pasta(grain, width, shape, hasEgg)
{
    // What grain is it made of?
    this.grain = grain;

    // How wide is it? (number)
    this.width = width;     

    // What is the cross-section? (string)
    this.shape = shape;   

    // Does it have egg yolk as a binder? (boolean)
    this.hasEgg = hasEgg;  
}

Once you define an object constructor, you create instances of it with the new operator.

JavaScript

var spaghetti = new pasta("wheat", 0.2, "circle", true);
var linguine = new pasta("wheat", 0.3, "oval", true);

You can add properties to one instance of an object to change that instance, but those properties do not become part of the definition of other objects made with the same constructor, and do not show up in other instances unless you specifically add them. If you want the extra properties to show up in all instances of the object, you must add them to the constructor function, or to the constructor's prototype object (prototypes are discussed in the Advanced documentation).

JavaScript

// Additional properties for spaghetti.
spaghetti.color = "pale straw";
spaghetti.drycook = 7;
spaghetti.freshcook = 0.5;

var chowFun = new pasta("rice", 3, "flat", false); 
// Neither the chowFun object, nor any of the other existing
// pasta objects have the three new properties that were added
// to the spaghetti object.


// Adding the 'foodgroup' property to the pasta prototyp object
// makes it available to all instances of pasta objects, 
// including those that have already been created.
pasta.prototype.foodgroup = "carbohydrates"

// now spaghetti.foodgroup, chowFun.foodgroup, etc. all
// contain the value "carbohydrates"

Including Methods in the Definition

---

It is possible to include methods (functions) in the definition of an object. One way to do this is to include a property in the constructor function that refers to a function defined elsewhere. For instance, the following example expands on the pasta constructor function defined above to include a toString method that will be called if you display the value of the object.

JavaScript

// pasta is a constructor that takes four parameters.
// The first part is the same as above
function pasta(grain, width, shape, hasEgg)
{
    // What grain is it made of?
    this.grain = grain;

    // How wide is it? (number)
    this.width = width;     

    // What is the cross-section? (string)
    this.shape = shape;   

    // Does it have egg yolk as a binder? (boolean)
    this.hasEgg = hasEgg;  

    // Here we add the toString method (which is defined below).
    // Note that we don't put the parentheses after the name of 
    // the function; this is not a function call, but a 
    // reference to the function itself.
    this.toString = pastaToString;
}

// The actual function to display the contents of a pasta object. 
function pastaToString()
{
    // return the properties of the object

    return "Grain: " + this.grain + "\n" +
        "Width: " + this.width + "\n" +
        "Shape: " + this.shape + "\n" +
        "Egg?: " + Boolean(this.hasEgg);
}

var spaghetti = new pasta("wheat", 0.2, "circle", true);
// This will call toString() and display the properties
// of the spaghetti object (required Internet Explorer).
window.alert(spaghetti);