Prototype In Javascript

Let’s make an object

var employee1 = {
  id: 1,
  name: "rahul",
  getName: function () {
    console.log("employee name is ", this.name);
  },
};
console.log(employee1.id);
employee1.getName();
employee1.hasOwnProperty("id"); // returns true

Here we have an employee1 object which has id and name property and a getName method. And so getName method can be called on the employee1 object. In the same way employee1 can access the id property also.

But how can employee1 call hasOwnProperty() method since we haven’t defined it. We can say employee1 is inheriting this method from somewhere and so have to figure out from where it is inheriting.

So lets console.log(employee1)

Here if you observe, there are four things -> getName, id, name, and something like [[Prototype]]. And I hope you know what getName, id and name are. But what is this [[Prototype]]. First let me tell you about this [[]] bracket around Prototype, this bracket indicates that this Prototype is an internal property of this object, so whenever you see this double square bracket around any property in JavaScript, this simply means that property is internal or theoretical, means you can’t directly use it. So if you console.log employee1.Prototype you will get undefined, because there is nothing like that, it is conceptual or internal property of this object.

But one thing we can say by looking at that picture is that prototype is an Object and ya it is. And this is the thing which gives so much power to your objects. But before explaining how this prototype thing makes your object powerful, I want to tell you this -
If there is an object A, and an object B and if object A wants to use the methods and properties of object B, just make B the prototype of object A.
To understand the above statement and understand things better, lets take an example

Here we have two objects A and B. A has a method getInfo, now lets say B wants to use that method . How can it do that?? Let me write a magical line -

I know you all got bit confused, but now let me explain everything. Just like info which is a property to object A and B , every object as a property named __proto__. So whenever you make an object in JavaScript, JavaScript assigns __proto__ property to your object. This __proto__ property is an object itself. Also, you can set any object to a object’s __proto__ property which we have done above. Now when we assign A to B’s __proto__ , it gives B the power to access A’s properties and methods. So now, B can use A’s getInfo method. Let’s do that

and you will see the output

When you write B.__proto__ = A, in JavaScript terms, you are making A the prototype of object B.

Now before going ahead keep in mind these things-

Automatic Prototype Assignment: When you create an object in JavaScript, the engine automatically assigns a __proto__ property to that object, which links to its prototype.
Custom Prototype Assignment: You have the flexibility to assign any object to another object’s __proto__ property, thereby changing its prototype.
Inherited Properties and Methods: By reassigning the __proto__ property, the object gains access to the properties and methods of the newly assigned prototype.
Now i think you have a rough idea of __proto__ and that you can point it to any object, but by default where does this __proto__ property points to??

By default, the __proto__ property of any newly created object in JavaScript points to Object.prototype

so you ask what is this Object and this Object.prototype. First let’s understand about Object .

Object is a built-in constructor function that is used to create objects.So just like we write

we can also write

basically, the Object function in JavaScript when invoked with the new keyword, creates and returns a new, empty object. Since, functions are also objects in JavaScript, they can also have properties like objects. So you can assign properties to your function like

Output will be

So you can see that we can easily assign properties to functions and access it just like we do to objects.

When you define a function, the language automatically assigns a prototype property to that function, just like it assigns __proto__ to objects. When you create objects using the Object function or using {}, JavaScript sets the __proto__ property of that object to point to Object.prototype, the prototype property of the Object constructor function. So when you do this

you well get true. So now i think you understand what __proto__ is and how it is linked to prototype, but just to be sure, let me repeat it one more time-

__proto__ is a property automatically assigned by JavaScript to every object, and it points to the prototype object (i.e., the prototype property) of the constructor function that created it. Notice that I specifically mentioned "the prototype property of the constructor function that creates it," rather than just the Object function. This is because you can define your own constructor functions and create objects through them, with their own associated prototype. For ex:

Here, consFun is our own constructor function and we are using it to create an empty object obj, now I know some of you will wonder how this empty function is able to create a new empty object. But for now, just remember that invoking an empty function with the new keyword will create and return a new, empty object. I will cover this topic in detail in another article, so please just keep this fact in mind for now(I understand it’s challenging to remember without a full explanation, but I promise to provide a detailed discussion in a future article). Now the console.log will print true here, and that tells us that obj.__proto__ is not pointing to Object.prototype, it is pointing to prototype property of consFun function. So the thing to note is, if you create a object using Object function or like {} , then that object __proto__ property will point to Object prototype property, but if you are creating it with your own constructor function, your object __proto__ will points to that function prototype property. Now we are going to understand very very important thing, and for that just do

And it will return true. Strange, right? This means that the __proto__ property of consFun's prototype is pointing to Object.prototype.

This behavior in JavaScript is called prototype chaining. So prototype chaining is a process in which objects are linked together via the __proto__ property, creating a chain where each object inherits properties and methods from its prototype. And this chain ends when the __proto__ property points to null. So the modified diagram will be -

Now that you understand __proto__, prototypes, and prototype chaining, you might be wondering: "Okay, I know what __proto__ and prototype are, and I understand that we can link objects together, but what exactly is inside the prototype object? What does it look like?" To explore this further, let's take a closer look at Object.prototype. Since it's an object, let's examine its structure and contents more closely to understand what it is.

console.log(Object.prototype);

and you get something like this

So, you can clearly see that Object.prototype is indeed an object, and its __proto__ property points to null, marking the end of the prototype chain. This object comes with built-in methods like hasOwnProperty, isPrototypeOf, toString, and several others. Any object can utilize these methods due to prototype chaining, which we'll explore in a moment. In essence, Object.prototype is simply an object with a set of predefined methods and a __proto__ property that points to null, effectively terminating the prototype chain.

Now lets understand some of these methods and the benefit of this prototype chaining

function consFun() {
    // an empty fucntion
}
consFun.normalProperty = "i cant get inherited";
consFun.prototype.funProperty = "i am a function property";

var A = new consFun();
A.aMethod = function () {
    console.log("this is A object method");
}
var B = {
    name: "i am B",
    bMethod: function () {
        console.log(this.name);
    }
}
B.__proto__ = A;
var C = {
    name:"I am C"
}
C.__proto__ = B;

console.log(A.funProperty);

B.aMethod();
console.log(B.funProperty);

C.bMethod();
C.aMethod();
console.log(C.funProperty);

I apologize for the long code, but it’s essential for understanding the concepts. In the code, we have a constructor function named consFun and three objects: A, B, and C. Object A is created using the consFun constructor function. We then set A as the prototype of B using B.__proto__ = A, and similarly, we set B as the prototype of C using C.__proto__ = B.

Now,

A has a method aMethod.
B has a property name and a method bMethod.
C also has a property name.
Since B is the prototype of C, C can use bMethod and access the name property defined in B. Furthermore, because A is the prototype of B, C can also use aMethod. This showcases the power of prototype chaining, where an object can access properties and methods from its prototype, its prototype's prototype, and so on.

Now, consider consFun, which has two properties:

funProperty, a prototype property, which is accessible to all objects created using consFun, as well as their prototype descendants.
normalProperty, a static property, which is directly attached to the consFun function itself.
Because funProperty is defined on consFun's prototype, objects A, B, and C (and any other objects created using consFun) can access funProperty. However, they cannot access normalProperty, since it is not part of consFun's prototype but rather a static property of the function.

In summary, objects can access properties defined on their constructor function’s prototype chain but cannot access static properties defined directly on the constructor function itself.
Now lets understand some methods defined under Object.prototype object.

Do you noticed in above code that we are writing

B.__proto__ = A;

But it is not recommended in javascript to access __proto__ like this.

Object.setPrototypeOf(B, A);

Above codes are same but later is recommend one and setPrototypeOf is method defined in Object.prototype object.There are many other methods defined on Object.prototype that you can explore on your own (I won't go into all of them here to keep the article concise).

If you’ve read this article up to this point, congratulations! You deserve a cup of coffee. So, go ahead, take a break, and enjoy your day!