Ronaldo Vitto Lewerissa

Software engineering learning documentation.

JavaScript for Noobs: What the heck is __proto__?

Prototypal inheritance is one component that gets acquaintance in JavaScript. You probably familiar with the classic inheritance which is wildly use among other programming languages, for instance: Java and C++.

Well, although prototypal inheritance is slightly similar with classic inheritance, but in fact, it is so much simple. In my opinion, though classic inheritance provides a decent structure for the code, but even a non-programmers can clearly notice it’s verbosity.

The concept of prototypal inheritance is pretty much easy to digest. Tip: keep it simple, don’t overthink it. Every object (except for a base object, we’ll cover it later) in JavaScript have this so-called prototype object as their properties. It consist of built-in properties/methods.

Here’s the thing: if you try to access a properties/method of an object and JavaScript engine doesn’t finds one, then it will search through it’s prototype object.

A prototype object may links to another prototype object. The only object that doesn’t refers to another prototype is a base object, and that said, is the bottom of the prototype chain.

There are several methods you could you use to mutate the prototype object, let’s deliberate one scheme that is not recommended due to performance issue. The following method will only make your code slow! But we’ll cover it for demo purposes.

Using proto

You can access an object’s prototype through proto  (dash-dash-proto-dash-dash). Remember to never ever everrr use this method.

proto  is available to all objects: object literals, functions, and even arrays. Let’s examine each, shall we.

Object Literals

The following is the proto  result when for an object literals, I have declared variable *a * previously as an object literals: var a = {};

object literal prototype

As you can see the prototype of the variable a  is an object. In this case, it’s a base object, that means it’s the end the prototype chain, there won’t be any other prototype object inside of this prototype.

Function

Here’s the result when you try to access it’s prototype:

function prototype

Hmm, interestingly, it’s an empty function. I’m not really sure about the idea around this, but as you know, function is literally an object too, hence there won’t be much difference whether the result is an Object {}  or a function Empty() {} .

You might wanna see what actually lies inside the prototype object, in this case, the first prototype object of the any function.

function prototype 2

Are you surprised? You might want to glimpse on methods like apply() , bind(),  and call() . You probably have used those methods several times, and yet you can’t figure why they’ re available to all functions out there. Well now you know, it’s there accessible thanks to JavaScript engine which discreetly put it under the hood, for you.

Now, I’d like to show you the base object of function objects:

function prototype base object

There you go!

Another proto  prototype lies inside the first proto  property. And, it’s an object, so as you might guess, it’s a base object, end of the prototype chain.

Array

Similar to function, but differs in the first proto  object:

array object prototype

Note that I’ve declared variable c*  *right before the statement. It appears that the proto  of an array is an array object as well. But, likewise a function, arrays are objects. Let’s just treat them the same.

Take a look at the built-in method/properties of it’s prototype object:

array object built-in

Yeah, push() , pop() , reduce() , and all other fancy methods come into sight. It’s kinda astonishing to discover their hideout.

On the next post I’ll discuss how to put prototype into real play. Just bear in mind that the proto  we conferred foregone is intended for nothing but awareness.

Written by Ronaldo Vitto Lewerissa

Read more posts by this author.