JavaScript Instance Properties

A constructor that is created in JavaScript can have properties defined for it. Each instantiation of the constructor has it’s own copy of the properties. These are called ‘instance properties.’

For example, suppose the following constructor was defined:

function Dog()
{
this.legs = 4;
}

From this constructor, two instances of the Dog class could be instantiated:

var myDog = new Dog();
var myDog2 = new Dog();

Each of these instances has the same value for the ‘legs’ property but they eahch have their own copy.

document.write(myDog.legs);
document.write(myDog2.legs);

Related articles:
Object-oriented JavaScript
JavaScript Instance Methods

JavaScript is an Object-Oriented Language

JavaScript is often considered to not be an object-oriented language. This stems from it not supporting inheritance through classes. JavaScript does use prototype-based inheritance, however. Prototypes make properties and methods of a constructor available to all instantiations of the constructor. These aren’t classes, in the strict sense of the word, but JavaScript is able to simulate classes effectively.

Related articles:
Object-Oriented JavaScript

JavaScript Prototypes

In JavaScript, when a function is defined a property called prototype is automatically created. Properties and methods can be added to this prototype. Any properties or methods added to this prototype will be available to any instantiated instances of the function. The function is a constructor and therefore is similar to a object-oriented class.

For instance, if a constructor function exists for a square, as follows:

function Square(intSideLength)
{
this.perimeter = 4*intSideLength;
this.area = 2*intSideLength;
}

Then a property can be added to all instances of the Square class, as follows:

Square.prototype.sides = 4;

Since this property has been set up, it can be accessed on all instantiated instances of the Square class. For example:

var mySquare = new Square(5);
document.write(mySquare.sides);

Methods can also be added to prototypes:

function Square(intSideLength)
{
this.sideLength = intSideLength;
}

Square.prototype.perimeter = function() {return 4*this.sideLength;}

var mySquare = new Square(5);
document.write(mySquare.perimeter());

Related articles:
Object-oriented JavaScript

JavaScript Constructors

A constructor is used to define a class of objects. To create a constructor in JavaScript, use the new keyword, followed by a function call. The function that is called is where the constructor is defined. In this function, set any properties that should always be present for the constructor.

Consider the following example:

function Square(intSideLength)
{
this.perimeter = 4*intSideLength;
this.area = 2*intSideLength;
}

In the preceding example, the function is the constructor. Use the this keyword to assign properties directly to the constructor. The constructor is now ready to be used:

var mySquare = new Square(4);
document.write(mySquare.perimeter);
document.write(mySquare.area);

Object Oriented JavaScript

I am often asked the question, “Is it possible to use object oriented principles with JavaScript.” The answer to that is “not completely, but you can simulate objects in JavaScript.” I am planning to write a series of articles on how to accomplish this through the use of constructor functions and prototype objects. As I do, I will add links to those articles here. Stay tuned…

JavaScript is an Object-Oriented Language
JavaScript Constructors
JavaScript Prototypes
JavaScript Instance Properties
JavaScript Instance Methods