Agenda:

In Previous Article, we learnt about What are objects in Javascript and various way to handle it. In this article, we will discuss a very important feature of Javascript which is Object Prototypes. We will also discuss How Prototypal Inheritance works in Javascript. Let us get started.

What is Object Prototype:

Every object in javascript has an internal hidden property which is[[Prototype]]. The value of this property is called prototype. The value can only be null or any object. Assigning a straight single data is ignored and results again in null assignment.

Now, the question is How to manipulate this internal hidden [[Prototype]]? We can get or set its value using __proto__. Simply, we can say __proto__ is just a getter or setter for [[Prototype]].

By books,

"Object prototype is the object instance from which the object is inherited."

Prototypal Inheritance:

In general acquiring traits of parent entity in child entity referred as inheritance. In Javascript, [[Prototype]] can be used to implement inheritance in Javascript, referred as Prototypal Inheritance. Considering an example of Printer entity, where a collection of printers can have some common attributes. Programmatically, We can create an javascript object having some common attributes for a group of similar entities and can be used to assign it as prototype of those.

Get it worked:

Let us create a Printer object as follows:

  1. var printer = {
  2. brand:"EPSON",
  3. print: function(){
  4. console.log('It prints');
  5. }
  6. }
  7.  
  8. var laserPrinter = {
  9. isLaser: true,
  10. __proto__: printer
  11. }
  12.  

Please note we are assigning printer as __proto__ of laserPrinter. Now, you must be able to access all properties of printer through laserPrinter.

  1. laserPrinter.print(); //should call print function

Inheritance level can raise up to multiple hierarchy. But it can not be circular.

  1. var reportPrinter = {
  2. isReport: true,
  3. __proto__: laserPrinter
  4. }
  5. reportPrinter.print(); //should still be able to call print

In case you try to assign circular hierarchy it must throw an expection.

  1. printer.__proto__ = reportPrinter //Uncaught TypeError: Cyclic __proto__ value

A very important statement to note with prototype is Writing does not uses prototypes, but reading does. To demonstrate it lets add another print function in laserPrinter object as follows:

  1. laserPrinter.print = function() {
  2. console.log("Its laser print");
  3. };
  4. laserPrinter.print(); //should print "Its laser print"
  5.  

Please note, now we have two print functions one in printer and another in laserPrinter. But calling laserPrinter.print() calls function defined in child object. Here we have few points to discuss:

  • How come we are able to define same function in child object laserPrinter ?
  • When assigning/writing any property to child object it does not traverse through prototype and creates a new property (There is an exception when getter/setter are defined for a property. If there are getter/setter for a property then assignment is treated like a function calling/reading operation)
  • Why laserPrinter.print() calls function of child object itself ?
  • Whenever calling/reading any property of child object instance it first reads it locally if it is found missing then only raises to prototype.
  • How to call print function of prototype in this case?
  • print in prototype can be called using laserPrinter.__proto__.print();

Conclusion:

In this article we learnt about object prototype. [[Prototype]] is an internal hidden property of every object and can be used to implement inheritance in javascript.

What is next:

In our next article we will be discussing about Function Prototype

Good Bye 👋 !! until I write again. Code well, Cook good.