Advanced Object Creation (JavaScript)

Other Versions

A constructor is a function you call to instantiate and initialize a particular type of object. You invoke a constructor with the new keyword. Here are a few examples of using constructors.

Constructor Examples

---

JavaScript

var myObject = new Object();             // Creates a generic object with no properties.
var myBirthday = new Date(1961, 5, 10);  // Creates a Date object.
var myCar = new Car();                   // Creates a user defined object, and initializes its properties.

The constructor is passed a reference to a newly created empty object as the value of the special this keyword. It is then responsible for performing appropriate initialization for the new object (creating properties and giving them initial values). When completed, the constructor returns a reference to the object it constructed.

Writing Constructors

---

You can create objects and initialize them using the new operator in conjunction with predefined constructor functions such as Object(), Date(), and Function(). A powerful feature of object-oriented programming is the ability to define custom constructor functions to create custom objects for use in your scripts. You create custom constructors so you can create objects with properties already defined. Here is an example of a custom constructor (note the use of the this keyword).

JavaScript

function Circle (xPoint, yPoint, radius) {
    this.x = xPoint;  // The x component of the center of the circle.
    this.y = yPoint;  // The y component of the center of the circle.
    this.r = radius;  // The radius of the circle.
}

When you invoke the Circle constructor, you supply values for the circle's center point and the radius (these elements are all that is needed to completely define a unique circle object). You end up with a Circle object that contains three properties. Here is how you would instantiate a Circle object.

JavaScript

var aCircle = new Circle(5, 11, 99);

Using Prototypes to Create Objects

---

When you write a constructor, you can use properties of the prototype object (which is itself a property of every constructor) to create inherited properties, and shared methods. Prototype properties and methods are copied by reference into each object of a class, so they all have the same values. You can change the value of a prototype property in one object, and the new value overrides the default, but only in that one instance. Other objects that are members of the class are not affected by the change. Here is an example that makes use of the custom constructor, Circle (note the use of the this keyword).

JavaScript

Circle.prototype.pi = Math.PI;
function aCirclesArea ()
{
    // This is the formula for the area of a circle.
    return this.pi * this.r * this.r;
}
// Make the function a method of the Circle Prototype object.
Circle.prototype.area = aCirclesArea;

// Invoke the area function of the Circle object.
var a = aCircle.area();

Using this principle, you can define additional properties for predefined constructor functions (which all have prototype objects). For example, if you want to be able to remove leading and trailing spaces from strings (similar to VBScript's Trim function), you can create your own method on the String prototype object, and all strings in your script will automatically inherit the method.

JavaScript

// Add a function called trim as a method of the prototype 
// object of the String constructor.
String.prototype.trim = function()
{
    // Use a regular expression to replace leading and trailing 
    // spaces with the empty string
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

// A string with spaces in it
var s = "    leading and trailing spaces    ";

// Displays "    leading and trailing spaces     (35)"
window.alert(s + " (" + s.length + ")");

// Remove the leading and trailing spaces
s = s.trim();
// Displays "leading and trailing spaces (27)"
window.alert(s + " (" + s.length + ")");

.