Welcome Guest! (App Version 3.1)

websitnero logo name

Prototypal Inheritance

Inheritance in JavaScript -- Prototypal Inheritance

JavaScript does not have classes, but Inheritance is implemented with use of Prototypes. The inheritance thus achieved via use of Prototype Properties in Objects, is known as Prototypal Inheritance.

In JavaScript, objects have a special hidden property which is [[Prototype]]. This property has either null value OR it contains a reference to some another object. That referenced object is called “a prototype” of our initial object.

Note: "People from languages like Java, which has classical inheritance, get even more confused because although constructors look like classes they don't behave like classes."

Example

<script>

var alpha = function(name, age){
  this.name = name;
  this.age = age; 
  this.printName = function(){
    return ("Name is: " + this.name);
  }
}

alpha.prototype.printAge = function(){
  return ("Age is: " + this.age);
}

var a = new alpha("Jenny", 27); 
var b = Object.create(a); 
b.state = "New York"; 
var c = Object.create(b); 
c.flag = "50 star flag"; 

alert(c.flag);//direct property
alert(c.state);//property via 1st level of prototypal Inheritance
alert(c.name);//property via 2nd level of prototype inheritance
alert(c.printName());//property via 2nd level of prototype inheritance
alert(c.printAge());//property via 3rd level of prototypal inheritance

</script>

Later on you will be able to change the font-sizes and other text based styles with the help of CSS, but currently you might enjoy the pre-fixed font-sizes and font-family provided by these tags.

Benefits of Prototype

Consider we make a constructor function and adding 3 properties and 3 methods to it. Now, if we make a new instance of this constructor function, our new object instance will take space of 3 properties and 3 methods in memory. Consider now we make 1000 instances of constructor function. Now, our 1000 object instances all take space in memory separately for their properties and methods. Now, memory is filled with space for 3000 properties and 3000 methods.

Now, consider scenario constructor function has 3 properties and via prototype there are 3 methods attached to it. Now, creating 1000 instances will take space for 3000 properties and only 3 methods. That is power of Prototypes having awesome "memory efficiency".

Prototype Chain

In JavaScript, each object has a private property holding link to another object which is called its Prototype. Now, this prototype again holds its own prototype, and this chain goes on till the last prototype is found to point null. This whole system of going from end node object to the top of chain as 'null' is known as Prototype Chain.

When we try to find a property (say, 'a') in an object (say, Obj1), then first of all 'Obj1' is searched for property 'a'. If property is found it is well and good. If not, then prototype of Obj1 is searched for property named 'a'. If found, good, else now 'prototype of this prototype' will be searched for such property and the process will go on till the property is reached or the 'null' object is reached as prototype. Then, the property value or in other case 'undefined' will be returned.

This whole gruesome process of finding a property and going through top of this inheritance is called Prototypal Inheritance.

Look at the example below for further understanding.

Example

<script>

var alpha = function(){
  this.a = 10;
  this.b = 20; 
}

alpha.prototype.c = 30;
var obj1 = new alpha(); 
var obj2 = Object.create(obj1); 
obj2.d = 40; 
obj2.f = 60;

var obj3 = Object.create(obj2); 
obj3.e = 50; 
obj3.b = 70; 

alert(obj3.a); //property via 2nd level of prototypal inheritance
alert(obj3.b); //direct property
alert(obj3.c); //property via 3rd level of prototypal inheritance
alert(obj3.d); //property via 1st level of prototypal inheritance
alert(obj3.e); //direct property
alert(obj3.f); //property via 1st level of prototypal inheritance

//here 'c' property of obj3 shows best example of prototype chain

</script>

Prototype Shadowing

When we try to find a property (say, 'a') of an object (say, Obj1) and due to Prototypal Inheritance the property in the complete prototype Chain is present in more than one places than the property value is taken at the closes to the chain of command from the end Object. Now, the other properties (the 'a' properties) whose value is not taken because some value encountered near to the end of chain is already taken, are said to be shadowed (as their values have not been taken by query). This is Property Shadowing as one value for a property is taken, and others are shadowed.

Example

<script>

var alpha = function(){
  this.a = 10;
  this.b = 20; 
}

alpha.prototype.c = 30;
var obj1 = new alpha(); 
var obj2 = Object.create(obj1); 
obj2.d = 40;

var obj3 = Object.create(obj2); 
obj3.a = 100; //direct property shadowing prototype values
obj3.b = 200; //direct property shadowing prototype values
obj3.c = 300; //direct property shadowing prototype values
obj3.d = 400; //direct property shadowing prototype values


alert(obj3.a); //output: 100 (not 10) 
alert(obj3.b); //output: 200 (not 20)
alert(obj3.c); //output: 300 (not 30)
alert(obj3.d); //output: 400 (not 40)

</script>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.