#constructor chaining

In Java, Constructors are used to creating and initializing the object’s state. The constructor also contains collections of statements to execute at time object creation.

Type of Constructors:

Default Constructor: A Constructor without any argument.

Parameterize Constructor: A Constructor with a number of arguments.

Points to Remember for Constructor

Constructor always has the same name as the…

Javascript being prototypal means that it can access methods and properties through what is known as the prototype chain. Everything in Javascript is an object, and every object has a special property known as the ‘prototype’. This post is a continuation of my previous post Constructor chaining & inheritance in javascript. I recommend that you read that post first as I’ll be referencing some of the same code.

The prototype is defined as an “object that provides shared properties for other objects” - Ecma International. What this means is that, by default, any object that inherits from another object automatically has reference to the parents prototypes all the way through the inheritance tree. When you call a method on an object (remember everything in Javascript is an object) it first looks through the local prototype, if it’s not found, it then continues checking prototypes up until it hits Object.prototype to find that method before throwing an error. To illustrate that lets slightly modify our mustang instance and take a look at the instance in the inspector.

function Car() { this.color = "red"; } Car.prototype.getColor = function() { return this.color; }; var mustang = new Car(); console.log(mustang.getColor()); // Prints `red` to the console console.log(mustang.toString()); // Prints [object Object] to the console

Stepping through this code you’ll see that we create a new constructor function as we did previously but this time we are creating a new getColor method on Car’s prototype that returns the color of the instance of Car. We then create a new instance of Car and log the output of the getColor method to the console. The following line is a perfect example of walking the prototype chain to try and find a toString method. We clearly didn’t create this method so where is it coming from? This is best illustrated using a screenshot of the browser console log of our mustang instance.

First thing to notice is that we don’t actually have a `prototype` property here but `__proto__` which is a non-standard label for accessing the prototype of an object. In the prototype of our Car instance we have the getColor method that we created which matches with the above code block. Next, because Car is a function which extends Object, we have the Object prototype which includes, among other things, the toString method that we used.

It is considered bad practice to overwrite the native method prototypes because other code on the page might be relying on those native prototypes to function properly. So what do you do if you want to use your own toString method? By creating a toString method in the prototype of your instance, Javascript will run into that one first and use it instead of the native method.

function Car() { this.color = "red"; } Car.prototype.toString = function() { return this.color; }; var mustang = new Car(); console.log(mustang.toString()); // Prints `red` to the console

So here we create a toString method on the Car prototype to return the color of Car. This time when we call the toString method, Javascript runs into our own toString method first and executes it instead of the native method printing red instead of [object Object]

Taking a look at the console log of our mustang object, you can now see the two toString methods and where they are in the prototype chain. Note: Although the console shows `__proto__` make sure you don't access it directly because it’s not available on all platforms, always use `prototype`.

To do constructor chaining while maintaining the prototype chain requires you to take one more step. If you simply take the lessons from the previous post and this post so far you would assume you could write something like.

function Baddie() { this.level = 1; } Baddie.prototype.levelUp = function() { this.level++; }; function Spider() { Baddie.apply(this); } var spider = new Spider(); spider.levelUp(); // Throws TypeError

By running the above script you will see that you get an error in the console "Uncaught TypeError: Object # has no method 'levelUp' ". And that is because when you chain constructors in this method you aren't maintaining reference to the parents prototype. To make this work as you would like you need to add one more line.

function Baddie() { this.level = 1; } Baddie.prototype.levelUp = function() { this.level++; }; function Spider() { Baddie.apply(this); } Spider.prototype = new Baddie(); // Add this line var spider = new Spider(); spider.levelUp(); console.log(spider.level); // Prints `2` to the console

By assigning the prototype of your new object to a new instance of your parent you maintain the prototype chain giving you access to its methods.

Combining the above lessons allows you to infinitely chain constructors as we did previously but this time, also maintain the prototypes.

function Baddie() { this.level = 1; } Baddie.prototype.levelUp = function() { this.level++; }; function Spider() { Baddie.apply(this); } Spider.prototype = new Baddie(); Spider.prototype.boost = function() { this.level = this.level + 10; }; function SuperSpider() { Spider.apply(this); } SuperSpider.prototype = new Spider(); var superSpider = new SuperSpider(); superSpider.levelUp(); console.log(superSpider.level); // Prints `2` to the console superSpider.boost(); console.log(superSpider.level); // Prints `12` to the console

And for reference here is the console output of our superSpider class pointing out the levelUp and boost functions

Javascript takes a lot of flack for being prototypal vs class based which leads a lot of developers to incorrectly assume that OOP techniques like constructor chaining and inheritance aren't possible. This couldn't be further from the truth; the real issue is that Javascript didn't used to include any native OOP style methods. Luckily however javascript still provided us enough power to be able to build these methods and techniques ourselves. It gets even easier when you are able to use ES5 Javascript; or for cross browser support use a framework like YUI which adds in the OOP methods missing from Javascript which I'll be covering in a follow up post.

The first step is to understand that a constructor in Javascript is simply a function that you call with the word `new`. In the following example we are creating a function called Car, creating a color property on each instance of Car with the `this` special property, then creating a new instance of that function which is being assigned to the `mustang` variable.

function Car() { this.color = "red"; } var mustang = new Car(); console.log(mustang.color); // Prints `red` to the console

The `new` keyword is very important when creating constructors in javascript. Without `new` Car will be executed and `this` will point to `window` creating global variables, and it's return value will be assigned to mustang. In this case mustang will be undefined and if you try and access any properties on it your script will grind to a halt.

To be able to chain these constructors we will use one of two Javascript methods; call(), or apply(). These allow us to call another method in javascript but specify the scope to which it executes.

A common example to illustrate inheritance is creating a character in a video game.

function Baddie() { // Set up the baddies defaults this.level = 1; this.hitPoints = 100; this.name = "Baddie"; } function Spider() { // Executing Baddie with it's context set to Spider // because we used `this` it now assigns it's properties // level, hitPoints, and name to the Spider instance. Baddie.apply(this); this.color = "red"; this.legs = 8; } var regularSpider = new Spider(); console.log(regularSpider.level); // Prints `1` to the console console.log(regularSpider.legs); // Prints `8` to the console

So here we have created two constructor functions, Baddie and Spider. The important line here is Baddie.apply(this); which executes Baddie in the context of Spider - adding those properties to the Spider instance. Using this technique you can chain as many constructors together as you like.

This is great but what if we need to create many different types of Spiders; we need a way to pass data from our instantiation down the stack.

function Baddie(config) { // Set the baddie defaults using the // supplied configuration values or the defaults config = config || {}; this.level = config.level || 1; this.hitPoints = config.hitPoints || 100; this.name = config.name || "Baddie"; } function Spider(config) { // This time we pass in a second paramter which // is the configuration object, or an empty // object if none was supplied config = config || {}; Baddie.apply(this, arguments); this.color = config.color || "red"; this.legs = config.legs || 8; } var regularSpider = new Spider(), // Pass a configuration object into the constructor superSpider = new Spider({ level: 10, hitPoints: 10000, name: "Super Spider", color: "yellow", legs: 16 }); console.log(regularSpider.level); // Prints `1` to the console console.log(superSpider.level); // Prints `10` to the console console.log(regularSpider.color); // Prints `red` to the console console.log(superSpider.color); // Prints `yellow` to the console

With this example we are creating a super spider by passing a configuration object into the Spider constructor. For this to have any effect down the chain we need to add a second parameter to our apply() call. arguments is a special variable available in all functions which is an array-like object corresponding to the values passed to a function. This allows us to pass everything that was in the configuration object down to the next constructor.

If you remember a little earlier I mentioned we could also use the call() function. This function accepts an argument list instead of an array of values. So if you prefer to pass in values in this matter you would use call() instead of apply().

The last topic I want to touch on in this post is private properties and constructor methods using chained constructors. They are done pretty much exactly how you would assume coming from other languages but I'm going to illustrate the syntax just to drive it home. I have trimmed down the code a bit in this example to highlight the parts related to this topic.

function Baddie(config) { var id = "abc"; // Code removed for brevity this.getId = function() { return id; }; this.setId = function(newVal) { id = newVal; } } function Spider(config) { Baddie.apply(this, arguments); // Code removed for brevity } var spiderOne = new Spider(), spiderTwo = new Spider(); console.log(spiderOne.getId()); // Prints `abc` to the console spiderOne.setId('123'); console.log(spiderOne.getId()); // Prints `123` to the console console.log(spiderTwo.getId()); // Prints `abc` to the console

So as you can see in the Baddie function I created a local variable called `id` and assigned it a default value. I also created very basic getter and setter methods so that you can access this variable from outside of the function. Further down in the script I instantiate two completely separate spiders - they even have their own private id variable which is illustrated when I set it to 123 for spiderOne, but spiderTwo is still the default.