Specifying prototypes using object literals in JavaScript

In JavaScript, there are different ways to create an object. Once the object is created we can check its type by:

our_inst instanceof InstType


If we want to know about the function that created the instance we can do following:

our_inst.constructor == FunctionThatCreatedIt

So "constructor" is a property defined on the Property object and it always points back to the function that created the instance. If the object is created using object literal then following will return true because the literals (i.e. var our_inst = {}; ) point back to Object.

our_inst.constructor == Object; 

If the object is created using a constructor function e.g.

function Browser(name, version){
  this.name = name;
  this.version = version;

}

Then following will return true (as chrome.constructor should point back to the Browser):

var chrome = new Browser("Chrome", "1.0.3");

alert(chrome.constructor==Browser);


So far so good. Now inheritance in JavaScript works using a "prototype" property, which in itself is an interesting topic. If you add properties to the "prototype" then it will be accessible to all instances of that type. We can add multiple "prototypes" to our type like following (and whatever we add to the prototype, it will be available to all instances of Browser type):


Browser.prototype = {

  renderText: function(){

    return alert('Rendering Text...');

  },

  renderCSS:function(){

    return alert("Rendering CSS...");

  }

}; 


But now if I do the following, it will return 'false':

alert(chrome.constructor==Browser);


Which looks quite strange, no? When I came across this I was not sure what happened there. So there are few things at play here, let's look at them one by one.


1- Every function in JavaScript has a property named 'prototype' which points to the Prototype object. The Prototype object has a property named "constructor" which always points back to the constructor function that created the instance. 

2- Now if you try to define the prototype like 

Browser.prototype = {};

Then, what happens is that we have assigned an object literal to Browser's prototype. So the "constructor" is defined on the Prototype object but now we have assigned an object literal to Browser's prototype and object literal's "constructor" point backs to "Object". Since the object literal we assigned doesn't have any 'constructor' property so it defaults back to the Object. So that's why following outputs "Object" as opposed to "Browser".


alert(chrome.constructor==Browser);


To remedy this situation we can explicitly set the 'constructor' property inside the object literal like:

Browser.prototype = {

  constructor: Browser,

  renderText: function(){

    return alert('Rendering Text...');

  },

  renderCSS:function(){

    return alert("Rendering CSS...");

  }

}; 

I am no JavaScript czar, I just love learning about it. If you find any mistakes or errors, please reach out to me so I can correct those. Following Gist contains all the corrected code.