Simple Concepts of JavaScript Prototypal Inheritance

One more JavaScript article tutorial to discuss inheritance in JavaScript programming language. Please go to the full post-page for details or you can keep reading these related JavaScript articles below:

- JavaScript Prototype: Some Basic Concepts
- 5 Chief JavaScript Inheritance Concepts


Sampled by © JavaScriptBank.com

Behavior reuse is one of the key aspects of Object Oriented programming. Many mainstream Object Oriented languages, achieves behavior reuse by using class based inheritance. In class based inheritance, a class defines how objects stemming from it should behave.

However, not all languages use class based inheritance to achieve behavior reuse. The best possible example is JavaScript. It doesn’t have a concept of classes. Some people often confused about JavaScript’s object oriented capabilities due to this fact. But in reality, JavaScript is a more expressive and flexible Object Oriented language compared to some of the mainstream languages.

If JavaScript doesn’t have class based inheritance, how does it reuse the behavior? For that it follows the technique called Prototypal Inheritance.

In prototypal inheritance, an object is used to define the behavior of another object. Let’s try to understand this with a simple example:

    var father = {

     first_name: "James", 
     last_name: "Potter",
     hair_color: "black",

     is_good_at_quidditch: true,
 
     name: function(){

      return this.first_name + " " + this.last_name

     }
    }
 
    var son = {
     first_name: "Harry" 
    }

    son.__proto__ = father;
 
    father.name()
    >> James Potter

 
    son.name()
    >> Harry Potter
 
    son.hair_color
    >> black

 
    son.is_good_at_quidditch
    >> true

Here the ‘father’ object acts as the prototype for ‘son’. Hence, ‘son’ inherits all properties defined for ‘father’ (Note the __proto__ property of ‘son’ object was explicitly overridden to set ‘father’ as the prototype).

Even though it was used as a prototype, ‘father’ object can be still manipulated as a regular object. This is the main difference of a prototype from a class.

Object Hierarchy

The process of object responding to a property call in JavaScript is fairly straight-forward. It will first check whether it defines the property on its own; if not it will delegate the property call to its prototype object. This chain will continue to the top of object hierarchy until the property is found.

Talking about the object hierarchy, all objects in JavaScript are descended from generic Object. The generic Object prototype is the default prototype set on all objects at the instantiation, unless a custom prototype object is defined.

So any given inheritance hierarchy in JavaScript is chain of objects with the generic Object prototype at the root.

Creating New Objects

Though JavaScript doesn’t have classes, you can define a constructor function and call it with the new keyword to instantiate a new object. As I mentioned before, when the new object is created it uses the generic Object prototype as its prototype.

Let’s take an example of creating basic shape objects. The constructor takes the number of sides and vertices as the arguments.

var Shape = function(sides, vertices){
  this.sides = sides; 
  this.vertices = vertices; 

}
var triangle = new Shape(3, 3);

What if we want to create different types of triangles? Yes, we can use our basic shape object as the prototype for all our triangle objects.

var Triangle = function(angles, side_lengths){

  this.angles = angles || [60, 60, 60]; 
  this.side_lengths = side_lengths || [5, 5, 5]; 

}
Triangle.prototype = new Shape(3, 3);

 
var isosceles_triangle  = new Triangle([70, 70, 40], [5, 5, 10]);

var scalene_triangle  = new Triangle([70, 60, 50], [5, 10, 13]);

 
isosceles_triangle.sides
>> 3
 
isoceles_triangle.vertices
>> 3
 
scalene_triangle.sides

>> 3
 
scalene_triangle.vertices
>> 3

Basically, when you call a constructor function with the new keyword; it will set the __proto__ property of the newly created object to the object defined in prototype property of the constructor function.

Modifying Prototype Object at Runtime

All Objects in JavaScript can be modified during the runtime. Since prototype objects are also regular objects, we can modify them too. However, when you modify a prototype object its changes are reflected to all its descended objects too.

  Triangle.prototype.area = function(base, height){

    return(1/2 * base * height);
  }

 
  isosceles_triangle.area(10, 4); 
  >> 20

What’s most interesting is we can use this way to extend the built-in objects in JavaScript. For example, you can extend String object’s prototype to add a capitalize method.

    String.prototype.capitalize = function(){
      return this.charAt(0).toUpperCase() + this.slice(1);

    };
 
    "john".capitalize();
    >> John

Further Reading

If you like to learn more about JavaScript’s object model and prototypal inheritance, you would find following articles/posts useful.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
16 Free Code Syntax Highlighters by Javascript For Better Programming
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com