DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Amod Shinde
Amod Shinde

Posted on

Prototype in Javascript

Prototype in Javascript

In this article, we shall discuss prototype in Javascript and how it works under the hood. Often developers who are new to Javascript wonder what is this magic keyword and how the heck it gives access to some methods you never define? Let us find out what prototype is all about.

Introduction to Javascript prototype

By default, Javascript provides the Object() function. You can verify it by printing it in the console.

console.log(Object);
Enter fullscreen mode Exit fullscreen mode

output:

Output

Object() though seems like an object, it's a function and not an object. It might be a little confusing but remember that Object() is a function and it provides an anonymous object that can be referenced using prototype keyword.

console.log(Object.prototype);
Enter fullscreen mode Exit fullscreen mode

output:

output2

This Object.prototype object has predefined methods such as toString() , valueOf(). In JS, when a function is a value of a property of an object, it's called a method.

The constructor of Object.prototype, in turn, references the Object function:

Prototype chaining

Let's understand it better using an example. let's define a constructor function called Programmer.

function Programmer(name, language) {
this.name = name;
this.language = language;
}
Enter fullscreen mode Exit fullscreen mode

The above constructor function accepts name and language as parameters and assigns them to the name and language properties respectively. Behind the scene, JS creates a new function Programmer() and an anonymous object.

Protoypes in javascript

so similar to what we saw earlier in the case of object function, even this Programmer() function has a property called prototype that references an anonymous object and constructor of which references back to the Programmer() function.

Let us print both in the console and see the output:

console.log(Programmer);
Enter fullscreen mode Exit fullscreen mode

Output:

prototype chaining

console.log(Programmer.prototype);
Enter fullscreen mode Exit fullscreen mode

Output:

Prototype chaining output

We can observe that the object we get from Programmer.prototype has a constructor that is referencing the Programmer() function itself. In addition to this, JS links the Programmer.prototype to Object.prototype object via [[ prototype ]], this is known as prototype linkage.

The Image will help you understand it better:

Prototypes

Defining custom methods in the Javascript prototype

You can define your own custom methods in the prototype object. These custom functions are further accessible to the instances created from that function.

The following code defines a new method called intro() on Programmer.prototype:

Programmer.prototype.intro = function() {
    return "Hello, My name is " + this.name + " and I am a " + this.language + " Developer";
}
Enter fullscreen mode Exit fullscreen mode

This intro() function is added to the Programmer.prototype object.

javascript prototypes

Now, let's create an instance of the Programmer

let p = new Programmer('Jay', 'Python');
Enter fullscreen mode Exit fullscreen mode

The JS will now create a new object p and links to Programmer.prototype object via the prototype linkage.

Now let's call the intro() function from this p instance:

let introduction = p.intro();
console.log(introduction);
Enter fullscreen mode Exit fullscreen mode

Output:

JS prototype o/p

How does this work?

Since p doesn't have its own intro() method, Javascript follows the prototype linkage and finds it on the Programmer.prototype object and executes it.

prototype

Now let's try to call toString( ) method on p object.

let pString = p.toString();
console.log(pString);
Enter fullscreen mode Exit fullscreen mode

How does this work?

Again, since p doesn't have its own toString( ) method, Javascript follows the prototype linkage and searches for it on the Programmer.prototype object. Because the Programmer.prototype doesn't have the toString( ) ,method, it further follows the prototype linkage and searches in the Object.prototype object. It finds toString( ) here and executes it:

Prototype

If you call a method that doesn't exist up the prototype linkage, i.e. on the Programmer.prototype or Object.prototype, then Javascript will throw an error that it cannot find the method specified.

p.changeProfession();
Enter fullscreen mode Exit fullscreen mode

since changeProfession( ); doesn't exist on any of the objects in the prototype chain javascript throws an error.

prototype in js

let's create another instance called q:

const q = new Programmer('Raj', 'Javascript');
Enter fullscreen mode Exit fullscreen mode

prototype in js

Now, p and q both the objects have the same objects and properties. But what if we define another method on q ? will p be able to access it ?

The code defines method getSalary( ) on q object.


q.getSalary = function () {
    return "My salary is decent.";
}
Enter fullscreen mode Exit fullscreen mode

This getSalary( ) method is added to only q object and not on Programmer.prototype or p.

Image js

If you try to call getSalary( ) function with p: it will throw an error:

The Dunder Proto (_ _ proto _ _)

The proto is pronounced as dunder proto. The proto is an accessor property of the Object.prototype object. It exposes the internal prototype linkage ( [[Prototype]]) of an object through which it is accessed.

The p.proto exposes the [[Prototype]] that references the Programmer.prototype object.

console.log(p.__proto__ === Programmer.prototype); // true
console.log(p.__proto__ === q.__proto__); // true
Enter fullscreen mode Exit fullscreen mode

You should, however, use the Object.getPrototypeOf() method instead of the proto. The Object.getPrototypeOf() method returns the prototype of a specified object.

console.log(p.__proto__ === Object.getPrototypeOf(p)); // true
Enter fullscreen mode Exit fullscreen mode

Another popular way to get the prototype linkage when the Object.getPrototypeOf() method wasn’t available is via the constructor property as follows:

p.constructor.prototype
Enter fullscreen mode Exit fullscreen mode

TheΒ p.constructorΒ returns programmer, therefore,Β p.constructor.prototypeΒ returns the prototypeΒ object.

Shadowing

See the following method call:

console.log(p.intro());
Enter fullscreen mode Exit fullscreen mode

The p object doesn’t have the intro() method defined, therefore JavaScript goes up to the prototype chain to find it. In this case, it can find the method in the Programmer.prototype object.

Let’s add a new method to the object p with the same name as the method in the Programmer.prototype object:

p.intro = function() {
    console.log('Hello');
}
Enter fullscreen mode Exit fullscreen mode

And call theΒ intro( )Β method:

console.log(p.intro());
Enter fullscreen mode Exit fullscreen mode

Because the p object has the intro() method, JavaScript just executes it immediately without looking it up in the prototype chain.

This is an example of shadowing. The intro() method of the p object shadows the intro() method of the prototype object which the p object references.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.