Frenchy Front-end Engineer

Everywhere on the web we read that Javascript has prototypal inheritance. However Javascript only provides by default a specific case of prototypal inheritance with the new operator. Therefore, most of the explanations are really confusing to read. This article aims to clarify what is prototypal inheritance and how to really use it on Javascript.

Prototypal Inheritance Definition

When you read about Javascript prototypal inheritance, you often see a definition like this:

When accessing the properties of an object, JavaScript will traverse the prototype chain upwards until it finds a property with the requested name. Javascript Garden

Most Javascript implementations use __proto__ property to represent the next object in the prototype chain. We will see along this article what is the difference between __proto__ and prototype.

Note: __proto__ is non-standard and should not be used in your code. It is used in the article to explain how Javascript inheritance works.

The following code shows how the Javascript engine retrieves a property (for reading).

Let's take the usual class example: a 2D Point. A Point has two coordinates x, y and a method print.

Using the definition of the prototypal inheritance written before, we will make an object Point with three properties: x, y and print. In order to create a new point, we just make a new object with __proto__ set to Point.

This is completely different from the code given above. Point is now a function, we use a prototype property, the new operator. What the hell!?

How new works

Brendan Eich wanted Javascript to look like traditional Object Oriented programming languages such as Java and C++. In those, we use the new operator to make a new instance of a class. So he wrote a new operator for Javascript.

C++ has the notion of constructor, that initializes the instance attributes. Therefore, the new operator must target a function.

We need to put the methods of the object somewhere. Since we are working on a prototypal language, let's put it in the prototype property of the function.

The new operator takes a function F and arguments: new F(arguments...). It does three easy steps:

Create the instance of the class. It is an empty object with its __proto__ property set to F.prototype.

Initialize the instance. The function F is called with the arguments passed and this set to be the instance.

Return the instance

Now that we understand what the new operator does, we can implement it in Javascript.

Real Prototypal Inheritance in Javascript

The Javascript specifications only gives us the new operator to work with. However, Douglas Crockford found a way to exploit the new operator to do real Prototypal Inheritance! He wrote the Object.create function.

Thanks for the comment. To be honest, I believe that this behavior is a design error, this is why I did not add it in the article. However if you really want to make a compliant function, it should be done 🙂

In my option, "Using the definition of the prototypal inheritance written before, we will make an object Point with three properties: x, y and draw." the last word "draw" should be "print" as written before.Am I right?A miss typing?

While this works and gets the job done, I can't say I'm a fan of how JavaScript accomplishes this. Yes it's a prototype based language, and yes that's a subset of an OOP language, but having to go around your elbow to get to your shoulder is not how a good language is designed. For example, for each function you put into your object, "this" gets a new context and does not refer to the object instance at all times.

Though the Object.prototype.__proto__ property may be deprecated, it's referencing a prototype property essential to the internal working of javascript as a language. Its "there" in the way that infrared light is there, even though it can't be seen. This article uses it to explain that mechanism.

Object.create = function (parent) {
function F() {}
F.prototype = parent;
return new F();
};
************************
what's the point of the above lines ? the function F is localed to the Create method , and you can never get two instances with the same class . In that case , if I want a object inheriting from parent , what's wrong with just copy the parent object , and then make some modify on the object .

Related Posts

April 5, 2012Climb – Property-based dispatch in functional languages (1)
ELS Presentation | A Generic and Dynamic Approach to Image Processing | Chaining Operators & Component Trees | Property-based dispatch in functional languages
This is the third (and last) presentation about my work on Climb at the LRDE. During the first one I tackled genericity […]

June 8, 2012CSS – Absolute position taking into account padding (6)When looking at the code of Lightbox.com I remarked that they are not using top and left in order to position their images but margin-top and margin-left. I've been wondering why for some time and finally found the reason.
It is a way to position absolutely elements in a container and […]

November 4, 2013Bitwise Truthiness (0)In this blog post, I explore another form of truthiness in Javascript. What happens if you use a bitwise operator on a value like 0|value or ~~value.
Context
We recently turned on the JSHint bitwise rule by default and the following code was caught.
var isValid = false;
for […]

August 27, 2011Start a technical blog, it’s worth it! (4)Lately, I've been advocating to all my student friends to start a blog. Here's an article with the most common questions answered :)
What are the benefits?
Being known as an expert. The majority of my blog posts are about advanced Javascript topics. As a result, I'm being tagged as […]