Over a million developers have joined DZone.

JavaScript’s Prototypal Inheritance Explained

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This blog post explains JavaScript’s prototypal inheritance in a simple way. As it turns out, if we initially leave out constructors, then it is easy to understand. Thus, we first look at the fictional programming language ProtoScript which is JavaScript minus constructors, explain it, and then move on to constructors. As a result, you should have a solid understanding of prototypal inheritance and won’t be confused, any more, by all the JavaScript tricks out there.

Inheritance in the fictional ProtoScript

Let us assume for a moment that we program in a language called ProtoScript that is exactly like JavaScript, but without constructors. That leads to a simpler version of JavaScript’s protypal inheritance that is easy to understand. Without constructors, there are two ways to create a new object in ProtoScript: one either constructs it directly (e.g. via an object literal) or copies another object. JavaScript does not have a built-in way for copying an object, but for ProtoScript and all completely prototype-based programming languages, this is an essential operation, as it replaces constructors. Just like JavaScript, ProtoScript objects contain named slots that hold either functions or values. The former kind of slot is called a method, the latter a property. The expression obj.prop looks up the value of slot prop in object obj. This lookup starts by binding this to obj and then looks for the slot in obj. If it cannot be found, the search fails with an error message, unless there is a special property called __proto__. In that case, the search continues in the object pointed to by that property. That object can again contain a __proto__ property, so we always get a prototype chain of one or more objects. While going through that chain, this stays bound to obj. The expression obj.method() works similarly: ProtoScript looks for the value of method and then tries to execute it. As an aside, the expression without parentheses, obj.method would return a function, without executing it. Thus, the parentheses can be seen as an operator that executes a function. The value of this is important for methods, because it allows them to look up other slot values. It is an implicit parameter.

In class-based languages, whenever we have a set of similar objects, say persons with a name that can be converted to a text string, we create a class for that set. In ProtoScript, which does not have classes, we create an initial person, e.g.

    var person0 = {
name: null,
toString: function() {
return "Person "+this.name;
All other persons are copies of person0. The only drawback of this approach is that the method toString() exists in each instance. We can avoid this kind of duplication by putting the method into the prototype. person0.toString() will execute the method in the prototype. Inside it, the expression this.name will find the correct property in person0, because this is still bound to person0. Naturally, copying person0 must not copy the prototype, the copy must be shallow.

The prototype is very similar to a class. It can also hold properties (such as a count of all persons) that are shared by all of its “instances”. Subclassing allows class-based languages to build on (to “extend”) persons when implementing a new class of objects that is similar. For example, a worker is a person that also has a (job) title. A worker’s toString() method mentions the title in addition to the name. The following code shows how ProtoScript extends persons to implement workers.

    var ProtoWorker = {
__proto__: ProtoPerson,
toString: function() {
return this.title+" "+this.name;
var worker0 = {
__proto__: ProtoWorker,
name: null,
title: null
We use the __proto__ property to let ProtoWorker modify the behavor of ProtoPerson. ProtoWorker changes (“overrides”) the ProtoPerson’s toString() method. Whenever one searches for that method and ProtoWorker is in the prototype chain (e.g. starting in worker0), its version comes first and hides the original version. Like before, new workers are created by copying worker0. This solution is still not as elegant as it could be, because we have to repeat property name. Self [1], a language that is more thoroughly prototype-based than JavaScript, avoids this repetition by allowing worker0 to point to person0, via a property similar to __proto__. JavaScript has a different solution that involves constructors.

To summarize: Like JavaScript, ProtoScript does not have classes, only objects. But the special property __proto__ and a clever way of sharing some objects, while copying others allow us to do everything that class-based languages can. Like in other prototype-based languages, we have the pleasure of always directly manipulating objects and there are fewer abstractions involved such as classes or instantiation. This makes prototype-based languages more intuitive for beginners. The next section explores JavaScript’s constructors.

Back to JavaScript

The following code shows how persons are implemented in JavaScript.
    function Person(name) {
this.name = name;
Person.prototype.toString = function() {
return "Person "+this.name;
var person = new Person("John");
The function Person is a constructor for persons. We need to invoke it via new Person(). The operator new creates an object with a property __proto__ that points to Person.prototype and hands it to Person() as the implicit parameter this. We thus arrive at the same result as with ProtoScript, but getting there is a bit more weird. The constructor Person combines the ProtoScript operations of defining the initial object and copying it. Note that the property __proto__ is non-standard, some browsers do not support it. But we need it to implement workers as an extension of persons, in the code below.
    function Worker(name, title) {
Person.call(this, name);
this.title = title;
Worker.prototype.__proto__ = Person.prototype;
Worker.prototype.toString = function() {
return this.title+" "+this.name;
We invoke Person without new to set up the inherited properties (which we weren’t able to do in ProtoScript). If you want to invoke a method that you have changed, you invoke it via the prototype of the “super-constructor” as follows. Only the code of the method “changes”, the value of this stays the same. This is because earlier properties in a prototype chain can hide later ones and we have to avoid un-hiding them.
    Constr.prototype.mymethod = function(x, y, z) {
SuperConstr.prototype.mymethod.apply(this, arguments);
apply() is similar to call(). Its first argument is also the value for this. But where call() has one additional argument for each parameter of the method, apply() only has a single second argument with a list of values for the parameters. Thus, you can use the array-valued variable arguments.

ECMAScript 5

In ECMAScript 5, Object.create() lets you create a new object and assign a prototype at the same time. That is, you get access to __proto__ in a standard way and can create prototype chains. A function for creating an object is not a constructor any more (no operator new!), but a factory function. As a result, prototype objects can finally stand on their own instead of existing as Constructor.prototype.
    var ProtoPerson = {
toString: function() {
return "Person "+this.name;
function createPerson(name) { // factory function
return Object.create(ProtoPerson, {
name: {
value: name
var person = createPerson("John"); // no "new"
If you wanted to make sure that createPerson() is never invoked via new, you could check that this is undefined. If you need to extend persons, like we did with workers, the property definitions inside createPerson() have to become an externally accessible entity. A hypothetical createWorker() would then use property definitions which have been (non-destructively!) derived from that entity.

Further reading

  1. Organizing Programs Without Classes”. A great introduction to the prototype-based programming language Self and how it compares to class-based languages. This greatly helped me understand how prototypal inheritance works.
  2. Inheritance revisited”. Provides a pattern for inheritance. The factory function pattern mentioned above might be a cleaner way.


From http://2ality.blogspot.com/2010/12/javascripts-prototypal-inheritance.html

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}