Click here to Skip to main content
13,141,157 members (52,329 online)
Click here to Skip to main content
Add your own
alternative version

Stats

13K views
12 bookmarked
Posted 8 Jul 2015

Prototypal Inheritance with Javascript

, 8 Jul 2015
Rate this:
Please Sign up or sign in to vote.
Prototypal Inheritance with Javascript

Introduction

I have worked with JavaScript for quite a while now, and for the most part have found it quite straight-forward to use. Most recently, I have been using it with frameworks including React.js and Node.js. As a web developer, JavaScript is part of your toolkit, and working with it is absolutely necessary.

My background is in classical object-oriented languages such as C++ and C#, and I use JavaScript for web development. So for this reason, there were a few areas of JavaScript that caught me out as it works differently to most other languages. I'll hopefully cover those other areas in future articles.

For the purposes of this article I want to cover JavaScript's implementation of object-orientation, and specifically how it implements inheritance.

Background

This article assumes that the reader is familiar with JavaScript. Although the concepts described here apply equally well to all prototypal languages, for the purposes of this article, I will specifically use JavaScript for all explanations and examples.

Most readers will be familiar with classical inheritance through languages such as C++, Java, C# etc. This can create a certain level of confusion when trying to comprehend inheritance in JavaScript which uses what is known as prototypal inheritance. JavaScript is not the only language to implement inheritance using this technique. Other languages include Self, Lua and NewtonScript to name a few.

In classical object-oriented languages you create classes (types) based upon abstractions. We then assign properties and behaviours to those classes. These classes are instantiated in our code to perform various actions and tasks. For example, you may define an Order class with the behavior of returnng a total order amount. In your application you create instances of these Order classes when necessary and invoke their behaviour, such as invoking the behaviour of returning the order total for a specific order.

Objects in JavaScript

Objects are an important primitive within JavaScript. The language is built from them. Whereas in classic object-oriented languages which are built from classes, JavaScript is built from objects. Therefore in JavaScript you can create a new instance of an object as follows.

myObject = new Object();

You can alternatively create the same object using this syntax.

var myObject = {};

This syntax uses object literal syntax. In JavaScript an object is essentially a collection of key-value pairs as in the following example.

myObject = {"Firstname": "Fred",  "LastName": "Smith" };

As can be seen from this object literal notation, this is where the JSON format comes from. JSON is essentially JavaScript object literals without any behaviour (methods).

As JavaScript is a functional language (where functions are first-class citizens) then you can also create objects using functions as in the following example.

function myObject(){}
var myObject = new myObject();

So that's how you create objects in JavaScript. Let's now move on to inheritance.

Inheritance with JavaScript

All fairly straight-forward so far. However, this is not how JavaScript works. It is a class-free, object-oriented language. There is no concept of a class in Javasdcript (or any of the other prototypal languages). Although certain texts may indicate that JavaScript is able to implement classical inheritance, it does not. This is simply syntactic sugar to give the illusion to classical developers that they can implement classical inheritance within JavaScript. The bottom line is that all inheritance is ultimately achieved using prototypal inheritance in JavaScript. This is because.

  • JavaScript is class-free (all classical object-oriented languages rely on the fundamental concept of the class)
  • All inheritance is ultimately achieved via the prototype chain (whether directly or indirectly using syntactic sugar)

Classical inheritance is simulated in JavaScript.

What is prototypal inheritance?

Objects within JavaScript contain an internal object property called prototype.

Object.prototype

The prototype object is the object from which the current object is based i.e. it is the protptype to the current object. To use the language from classical object-orientation, the prototype is the base class or ancestor from which the current object was created. All the methods and properties found on the current object can also be found on its prototype. This prototype object in turn, also contains a prototype object containing the object from which it was created. This chain (called the prototype chain) goes all the way up until we eventually get to the root Object. At this point we can go no further as we have reached the top of the prototype chain.

Let's start with an object called o.

var o;

Our object o contains a property called prototype. This object is the object from which o was created (or from which o was derived to use classical terminology).

var o = new Object()
console.log("typeof Object: " + typeof o); //outputs object
var p = o.prototype;
console.log("typeof o.prototype: " + typeof p); //outputs undefined 

We can keep doing this until we eventually reach the top of the prototype chain.

Inheritance is achieved in JavaScript by two key concepts.

  • Traversing the prototype chain - If JavaScript cannot find the property / method specified then it will look to the object's prototype. If it doesn't find it there, it will look through that object's prototype. It will keep looking at each object's prototype for the specified property / method until it finds it or gets to the top of the prototype chain.
  • The prototype object can be shared amongst different objects. Different objects can all share the same prototype object and can therefore share the same methods and properties.

How do you implement prototypal inheritance?

Now that we understand the underlying concepts of how inheritance is achieved in JavaScript, let's look at a simple example. Here we define an object called Vehicle. We then add a property to the Vehicle object - called make - and add a function that returns this property.

//Defining and instantiating an object called Vehicle using a function
function Vehicle() {}
var vehicle = new Vehicle();

//Adding properties to the Vehicle object. We can either add these as
//instance methods / properties, or to the Vehicle prototype so all 
//Vehicles can inherit them.

//adding an instance property 
function Vehicle(make) {
    // Instance properties can be set on each instance of the class
    this.make = make;
}

//Adding the property to the prototype ensures that all instances 
//share the property
Vehicle.prototype.Make = function() {
    console.log("My make is " + this.make);
};

var vehicle = new Vehicle('Vehicle');
vehicle.Make(); // My make is Vehicle

All well and good so far. Let's extend the Vehicle object by creating a Car class.

function Car(make){
	Vehicle.call(this, make);
}

Car.prototype = new Vehicle();
var car = new Car("Car");
car.Make();

What we're doing is assigning the Vehicle object to the Car's prototype. This allows the Car object to inherit all the methods and properties from Vehicle. We use the JavaScript method call() to achieve this. What this does is allow us to invoke a function and specify the context in which it is to be executed - hence why we pass in the this object. We know that Car has inherited the properties from Vehicle because we have invoked the Make() method that was only defined on our Vehicle object.

Summary

This method of inheritance is probably more difficult to comprehend to a developer coming from a classical object-oriented background. I know that it took me a while to fully grasp what was going on. If you work with JavaScript, then it's important that you understand how JavaScript implements inheritance, and hopefully this article has given a good overview. Feel free to leave a comment if you would like me to further elaborate on anything within this article.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dominic Burford
Software Developer (Senior) Grosvenor Contracts
United Kingdom United Kingdom
I am a professional software engineer and architect with over eighteen years commercial development experience with a strong focus on the design and development of web and mobile applications.

I have experience of architecting scalable, distributed, high volume web applications that are accessible from multiple devices due to their responsive web design, including architecting enterprise service-oriented solutions. I have also developed enterprise mobile applications using Xamarin and Telerik Platform.

I have extensive experience using .NET, ASP.NET, Windows and Web Services, WCF, SQL Server, LINQ and other Microsoft technologies. I am also familiar with HTML, Bootstrap, Javascript (inc. JQuery and Node.js), CSS, XML, JSON, Apache Cordova, KendoUI and many other web and mobile related technologies.

I am enthusiastic about Continuous Integration, Continuous Delivery and Application Life-cycle Management having configured such environments using CruiseControl.NET, TeamCity and Team Foundation Services. I enjoy working in Agile and Test Driven Development (TDD) environments.

Outside of work I have two beautiful daughters. I enjoy cycling, running and taking the dog for long walks. I love listening to music and am a fan of Rush and the Red Hot Chilli Peppers to name a few.

You may also be interested in...

Comments and Discussions

 
QuestionWhy it's undefined Pin
Ehsan Sajjad5-Jul-17 20:44
professionalEhsan Sajjad5-Jul-17 20:44 
AnswerRe: Why it's undefined Pin
Dominic Burford6-Jul-17 0:21
professionalDominic Burford6-Jul-17 0:21 
Questionmisleading at times Pin
Member 1206160025-Dec-16 7:16
memberMember 1206160025-Dec-16 7:16 
QuestionThanks Pin
Member 86060449-Sep-15 22:17
memberMember 86060449-Sep-15 22:17 
QuestionSome issues Pin
Gerd Wagner9-Jul-15 4:02
professionalGerd Wagner9-Jul-15 4:02 
AnswerRe: Some issues Pin
Dominic Burford9-Jul-15 5:50
professionalDominic Burford9-Jul-15 5:50 
GeneralMy vote of 5 Pin
Camilo Reyes8-Jul-15 8:09
professionalCamilo Reyes8-Jul-15 8:09 
GeneralRe: My vote of 5 Pin
Dominic Burford8-Jul-15 10:56
professionalDominic Burford8-Jul-15 10:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170915.1 | Last Updated 8 Jul 2015
Article Copyright 2015 by Dominic Burford
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid