{{announcement.body}}
{{announcement.title}}

How Prototype Works in JavaScript?

DZone 's Guide to

How Prototype Works in JavaScript?

Easily access prototypes in JavaScript.

· Web Dev Zone ·
Free Resource

In JavaScript, y default, every function has a property called prototype; this property by default is empty, and you can add properties and methods to it when you create an object from this function. The object inherits its properties and methods. For beginners, understanding the difference between prototype and __proto__ has been difficult.

JavaScript does not have class implementation like Java or C#; in javascript, you create a constructor directly and then use this constructor to create an object.
Prototypes in JavaScript

Here, X is a function and X1 is the object created from X.

Any function created in JavaScript is either a constructor or generic function. These two objects create a function object and prototype object; the function object holds a prototype property, and with the function name and Funtion_Name.prototype, we can access the prototype object properties.

When an object is created using the new keyword of the function/constructor, the JavaScript engine creates a new object of that function block, which holds a property named __proto__, which points to its function’s prototype object.

Accessing prototype object

If another object of that function is created using a new keyword again, another object is created,l which holds a __proto__ property, which again points to the function’s prototype object. The same will be true for every object that is created for the function using the new keyword.

This can be checked by:

funciton Mobile() {
  
}

console.log(Mobile.prototype);

var lg = new Mobioe();
console.log(lg.__proto__);

// verify
console.log(Mobile.prototype === __lg.proto__);


lg.__proto__ === Mobile.prototype // true


So, any property that is defined inside the constructor/function is accessible by the object of that function, which was created using the new keyword. So, when we try to access a property like lg.a it is first searched in the object of lg, and if it is not present, it is then searched in the prototype block of the constructor function. If it is not found even there, then it is undefined.

A property can also be defined inside the prototype block using:

functionName.prototytpe.propertyName = ‘Value’;


If a property with the same name is defined inside both the object as well as function prototype, then it is accessed from the object block. So, the first priority is of the object and then function prototype.

function Fun(){

this.a = 20;

}

Fun.prototype.a = 10;
let chk = new Fun();

console.log(“The output is:- ” + chk.a); //The output is 20


Also, the function object holds the function in it; whereas the object of that function also holds the function in its constructor. the same can be verified by:

console.log(Mobile === lg.__proto__.constructor); // true


The same holds true for the prototype of the function, as its constructor also holds the function in its constructor. This can also be verified by:


console.log(Mobile === Mobile.prototype.constructor); // true


so, basically, the function can be accessed using different ways.

Topics:
javascript prototype ,javascript ,prototype ,javascript 2.0 ,web dev ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}