Object-Oriented Code

We’ve already looked at objects in JavaScript - they’re collections of named properties and methods, and they can be created on the fly using the object literal syntax:

var user = {
    name: "tom",
    say: function (words) { alert(words); }
};

One reason using objects to hold data is useful is that, as mentioned, human brains are very good at categorizing things: a boat; a chair; a moose. Creating objects in code helps you to think about how the different parts of your code fit and (hopefully) work together.

In a large application you may have a great number of objects interacting with each other. Remember that objects are a grouping together of properties (like name) and methods (like say)? This grouping of data and behavior into one entity is called encapsulation.

A powerful tool available to you when building applications using objects is called inheritance. This is where an object inherits properties and methods from another object. An object can alter the properties and methods it inherits and add additional properties and methods too.

So, for example, you could create a moose object that inherits behavior from a mammal object. The moose could alter the mammal’s furriness, for example. You could then create a pangolin object that also inherits from a mammal. But, of course, pangolins aren’t furry, and they might have a different scaliness property.

How do objects inherit?

JavaScript uses prototypal inheritance. This means that, when an object inherits from another, the parent object is known as the child’s prototype.

There are a couple of other things to know: every object maintains a reference to its prototype and every object inherits from the global object object.

When you ask for a property of an object, JavaScript looks for the property on that object. If it doesn’t find it there, it follows the link to the object’s prototype and looks for the property there. It continues this, up the prototype chain until it finds it, or it returns undefined.

In other words, an object inherits properties and methods by maintaining a link to another object from which it wants to inherit. Multiple objects can inherit from one single object, but one single object cannot inherit from multiple other objects, although it can inherit from an object that inherits from another.

In practice

There are many ways to achieve inheritance in JavaScript. The most commonly used is the constructor pattern. In this pattern, a function called a constructor is used to create new objects. Constructors are used in combination with the new keyword to create objects.

Here’s an example constructor. Note the capital letter on Person - this is an important convention. Generally, in JavaScript, if it’s got a capital first letter, it’s a constructor and should be used with the new keyword.

var Person = function (name) {
    this.name = name;
};

Now you can use the new keyword to create Person objects:

var tom = new Person('tom');

This produces an object like this:

{
    name: "Tom"
}

In the constructor pattern you manually create the object from which the new objects will inherit by adding properties and methods to the prototype property of the constructor function. Like this:

Person.prototype.say = function (words) {
    alert(this.name + ' says "' + words + '"');
};

Now, objects created from the constructor will have the say method.

var tom = new Person("tom");
tom.say("Hello");

// Produces an alert: tom says "Hello"

This is just the start

Inheritance and object-oriented programming are big, complex areas that whole books are written about. If you’d like to know more there are a few great resources out there.

If you’d like to know more about the new keyword, check out the thread on Stack Overflow. For a slightly more detailed article about constructors, check out Constructors considered mildly confusing.