Object Oriented Programming in JavaScript - Part 3

  Reading Time:

JavaScript is growing faster and its user base is increasing vastly. Knowledge of JavaScript is going to be very important in the future to come for Web Developers and Designers. This is the third post in the series of Object Oriented Programming in JavaScript. This post will discuss on the prototype concept of JavaScript.

Prototype in JavaScript

Every object in JavaScript inherits properties from the Object.prototype object, which is a property of the global Object which comes standard with JavaScript(like the global Object in java from which all the objects are inherited, but not exactly the same. This is different).

Note: For you to run this code, open an empty tab in any of the browser that has developer tools and paste this code in the console.

Object.prototype.website = "codedodle";
  Object.prototype.author = "Tamil Selvan";
  // Creating a new object
  var newPostObjectOne = new Object();
  var newPostObjectOne.title = 'Object oriented programming in JavaScript - Part 1';
  var newPostObjectTwo = new Object();
  var newPostObjectTwo.title = 'Object oriented programming in JavaScript - Part 2';
  // The “website” and “author” property will be available in all the objects that we create.
  document.writeln('PostOne Title: ' + newPostObjectOne.title + '<br/>');
  document.writeln('PostOne Website: ' + newPostObjectOne.website + '<br/>');
  document.writeln('PostTwo Title: ' + newPostObjectTwo.title + '<br/>');
  document.writeln('PostTwo Website: ' + newPostObjectTwo.website);
Prototype in JavaScript

The prototype is a dynamic relationship. If you add any of the properties to the Object.prototype at anytime, it will reflect in the objects below the prototype chain.

Creating an Object without Prototype link

You can create object without this prototype linkage by using the Object.create(objectParam) method. The parameter for this function must be the object that you wish should be the prototype of the new object. If null is passed, there is no prototype link created.

Object.prototype.website = "codedodle";
  Object.prototype.author = "Tamil Selvan";
  // This object is created without the prototype inheritance.
  var newPost = Object.create(null);
  // The following will print “undefined”

Prototype Chain

When an object is created from the prototype link, it has the ability only to retrieve the properties from its prototype. When we try to retrieve a property from an object, and if that object does not contain that property, then JavaScript attempts to retrieve it from its prototype object. This continues until it reaches the top of the prototype link i.e. until it reaches Object.prototype.

If we add or try to update a property that is already in its prototype, it will become new property of that object instead of updating in its prototype object. You can never update a property in the prototype of an object, you can only retrieve it.

Prototype Chain
// Add properties to the prototype
  Object.prototype.website = "codedodle.com";
  Object.prototype.author = "Tamil Selvan";
  // Create an object with the Object.prototype as its prototype
  var PostTemplate = Object.create(Object.prototype);
  // dateCreated will be the same for all the object the has this object as the prototype
  PostTemplate.dateCreated = new Date();
  document.writeln('Website of PostTemplate - ' + PostTemplate.website + '<br/>');
  var OOPInJSPartOne = Object.create(PostTemplate);
  OOPInJSPartOne.title = 'Object Oriented Programming in Part One';
  document.writeln('Title - ' + OOPInJSPartOne.title + '<br/>');
  document.writeln('Website Property of OOPInJSPartOne - ' + OOPInJSPartOne.website);
  var OOPInJSPartTwo = Object.create(PostTemplate);
  OOPInJSPartTwo.title = 'Object Oriented Programming in Part Two';
  // This will not updated in the prototype chain, it will be created as a property of this object
  OOPInJSPartTwo.website = 'someother.com';
  document.writeln('Updated the website of OOPInJSPartTwo' + '<br/>');
  document.writeln('Website in the Object.prototype - ' + Object.prototype.website + '<br/>');
  document.writeln('Website in the PostTemplate - ' + PostTemplate.website + '<br/>');
  document.writeln('Title - ' + OOPInJSPartTwo.title + '<br/>');
  document.writeln('Website Property of OOPInJSPartTwo - ' + OOPInJSPartTwo.website + '<br/>');

Prototype in Native Types

The prototype link is also present in the native type of JavaScript. For example Number, String, Boolean, Array, Function all have the prototype link. If we add a property to the prototype object of any of these, it will be available to all the objects of that type. The property you add to the prototype object can be any valid JavaScript value, that includes function too.

Prototype in Native Types
// adding a property to the Number.prototype
  Number.prototype.applicationId = 3;
  var version = 2.1; // This is of type Number
  document.writeln('Type of variable: ' + typeof version + '<br/>');
  document.writeln('The version number application id is: ' + version.applicationId + '<br/>');
  // adding a property to the String.prototype
  String.prototype.website = 'www.codedodle.com';
  var postTitle = 'Object Oriented Programming in JavaScript';
  document.writeln('Type of variable: ' + typeof postTitle + '<br/>');
  document.writeln('This post belong to the website: ' + postTitle.website);
  // adding a function to the Array.prototype
  Array.prototype.realLength = function() {
    // returns the array length - 1 i.e. when length is from 0 - n
    return (this.length - 1);
  var years = [2010, 2011, 2012, 2013];
  document.writeln('The length of the array is: ' + years.length + '<br/>');
  document.writeln('The realLength of the array is: ' + years.realLength());

You can also add properties to the Function, Boolean and other types prototype object. If you have something to add or something to ask, leave a comment.

Basics of UnderscoreJS

UnderscoreJs is a JavaScript Utility library. It provides a huge collection of functions that comes in handy for the development process. The main focus of this...

Blogger Template Design From Scratch - Part One

Designing a blogger template from scratch is not as difficult as you might imagine. I had to search around a lot of websites and did a...