Web Programming TutorialsLearn the concept of Inheritance in JavaScript

Learn the concept of Inheritance in JavaScript

Inheritance-740X296

The advantage of creating prototype objects is that it allows us to know for certain that all objects of the same type have a specific common method or common methods that we can  implement on all of them without having to place these methods into each and every one of these individual objects. When we define a method in a prototype object, many objects can inherit this method.

Prototypes can be chained – that is, one prototype can point to another. JavaScript will follow the chain until it finds the method that it’s looking for, or it reaches the end.

When we want to invoke a method on an object, or read a certain property on an object, the runtime first looks inside the object. If the object itself does not contain what we want, the runtime looks for that method or property in the object’s prototype. Consider the following:

var Example_array = new Array;
var Example_array = [item1, item2, item3];

By definition, this array object inherits methods like length(), splice(), every() and indexOf() from its prototype object, Array.

For example, if we type:

var length = Example_array.length;

JavaScript doesn’t find the length method in the Example_array object itself, but it does find it in Example_array’s prototype and invokes it. The value of the variable length is then 3.

To better understand the concept of inheritance and prototypes, lets create a custom object. list1 is an object containing a list of names of persons and their eye colors, represented by a number from 1 to 5 (lists such as these can be used for population statistics purposes). For simplification purposes, lets assume we’re dealing with only 5 distinguishable eye colors.

var list1 = {
'darren':3,
'danny':1, 
'sean':3,  
'lenny':2, 
'david':3,
'sinead':3
}

Lets build a constructor function for objects of this type, and name it ColorList. The latter would accept two parameters – the list of names and colors, and a specific color we want to know about. Like so:

https://blog.eduonix.com/wp-content/uploads/2015/10/Learn-Javascript-And-JQuery-From-Scratch.png

function ColorList(list, color){
this.Len = Object.keys(list).length;
this.color = color;
}

Lets add to our constructor – a function that would calculate the amount of times the given parameter of color appears in our list parameter. Like so:

Object.keys(list).forEach(function(key){
 if(list[key] === color){
  count++;
}
}); 
this.count = count;

Our constructor function should now look like this:

function ColorList(list, color){
this.Len = Object.keys(list).length;
this.color = color;
var count = 0;
Object.keys(list).forEach(function(key){
 if(list[key] === color){
  count++;
}
}); 
this.count = count;
}

Now, lets add a method to our ColorList prototype property so that other instances (objects) can inherit it. The prototype property is used primarily for inheritance; you add methods and properties on a function’s prototype property to make those methods and properties directly available to instances of that function. Like so:

ColorList.prototype.fraction = function(){
document.write('the fraction of this color is '+ this.count/this.Len + '</br>');
}

The fraction() method that we just added returns the fraction of people with our chosen eye color in the list. Lets add another method to our prototype property which would display a string telling us which color we are dealing with as a parameter.

ColorList.prototype.col = function(){
var c;
var b;
b = this.color;
switch(b) {
    case 1:
        c = "brown";
        break;
    case 2:
        c = "grey";
        break;
    case 3:
        c = "hazel";
        break;
    case 4:  
        c = "green"
        break;
    case 5:
        c = "blue"
        break;
    default:
        c = 'i dont know';
}
document.write('the color is '+ c + '</br>');
};

Now lets apply our custom methods and properties to an instance of our object. For example, with our list1 object and a parameter of 3:

var color1 = 3;
var vist1 = new ColorList(list1,color1);

vist1.col();
vist1.fraction();
document.write('the list contains ' +vist1.Len+ ' names');

The result would look like this:

2

 

In conclusion, we created a new object vist1 with the ColorList() constructor function. As a result, this new object inherited ColorList’s properties and methods.

vist1 inherited all the properties and methods, including the col() and fraction() methods, from the ColorList function. Now vist1 can call fraction() or col() directly, even though we never created those  methods on it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -