Tutorial — Creating New Objects

Defining new Objects in JavaScript

If you're not familiar with Object-Oriented concepts, you can try the Object-Oriented Review

Introduction

You can define new object types and create instances of them with JavaScript.

Start by writing a function that has the same name as the new object type. (This is similar to how the constructor in many Object Oriented languages work: same name as the class.) For example, to create Point objects, write a function named Point(). In that function, create object fields by assigning values to (new) properties of the this object.

The new properties (object fields) can be anything your object requires. This includes not just names, dates and numbers, but functions and links to other objects!

The simplest form of the archetypal “point” object might look like this: 

function Point()
{
    // Assign (and Create!) Properties...
    this.x = 0;
    this.y = 0;
}

The function above creates two new properties on the this object, x and y. It does this simply by using them in the assignment statements. (In JavaScript, an attempt to write to a non-existing property creates that property on the spot!)

The magic happens in how we call this new function. Specifically, in how we put the JavaScript keyword new in front of the function name. For example, this line creates a new Point object (instance). 

// Create a new Point object...
var  my_point = new Point();

The new operator creates a new basic JavaScript Object and passes it to the function. Inside the function, that new Object is the this object. Therefore, the new properties created by the function are created on the this new Object. In effect, our Point function acts as a Point factory by bolting the required properties on to newly created Objects.

After the Point function finishes, the new operator returns the new Object. In this case (a common one), we assign that returned value to a variable (my_point). Once we have created a new instance of a class, we can use its properties as with any object: 

// Create a new Point object...
var  my_point = new Point();

// Assign values to 'x' and 'y'...
my_point.x = 21;
my_point.y = 42;
Default Values for New Objects

The Point class so far creates two new properties, both with values set to 0 (zero). It would be nice to be able to create new objects with specified initial values. We can do this by re-writing the constructor function to take arguments, in this case, arguments for the x and y properties: 

function Point(x,y)
{
    // Create & Assign Properties...
    this.x = x;
    this.y = y;
}

Notice that the x argument is different than the x property. JavaScript keeps them straight by context: An argument stands alone. A property always requires an object reference and a dot operator (or they can be referenced as items in an object's property array).

Notice also that the argument and property names in the example match for convenience. Argument names and property names can be anything you like. There is no requirement they match. The only requirement is Good Programming Practice, which requires you to make up sensible names.

Now, you can make new Point objects with specified initial values: 

// Create a bunch of new Point objects...
var  p1 = new Point(); // new point at origin by default
var  p2 = new Point(0,0); // new point at origin by specified value
var  p3 = new Point(21,42); // new point at x=21, y=42
var  p4 = new Point(-10,-10); // new point at x=-10, y=-10
Defining Object Methods

Methods are functions that are bound to an object type or class. Unlike standalone functions, you call a method only through an object instance or class.

JavaScript not only supports methods, it supports closures, a special type of function not natively available in many common languages. JavaScript also supports static, or class, methods.

You can give an object methods by assigning a function object to a Property: 

function Point(x,y)
{
    // Assign Properties...
    this.x = x;
    this.y = y;

    // function object creates the reset method...
    this.reset = function ()
    {
        this.x = 0;
        this.y = 0;
    }
    // function object creates the move method...
    this.move = function (x,y)
    {
        this.x = x;
        this.y = y;
    }
}

Now our Point objects will have two methods we can call: reset, which resets the point to the origin, and move, which moves the point to a new x,y.

Use them like this: 

var  p1 = new Point(0,0); // new point at origin

// move point to 20,20...
p1.move(20,20);

// move it back...
p1.reset();

// ...

 
(back)  §  Top Web JavaScript Tutorial