Understanding Prototype in JavaScript
Posted By : Vinay Tiwari | 31-Oct-2018
In this blog, we will learn about how to work prototype in javascript.
Example: Attach property to the object
function Student() {
this.name = 'John';
this.gender = 'Male';
}
var studObj1 = new Student();
studObj1.age = 15;
alert(studObj1.age); // 15
var studObj2 = new Student();
alert(studObj2.age); // undefined
As should be obvious in the above example, age property is connected to studObj1 instance. Be that as it may, studObj2 instance won't have age property since it is characterized just on studObj1 example.
A prototype is an object that is related with every functions and object by default in JavaScript, where function's prototype property is available and modifiable and object's prototype property (aka attribute) is not visible. Every function includes a prototype object by default.
The prototype object is an uncommon kind of enumerable object to which extra properties can be joined to it which will be shared over every one of the cases of its constructor function.
So, use prototype property of a function in the above example in order to have age properties across all the objects as follows.
Example: prototype
function Student() {
this.name = 'John';
this.gender = 'M';
}
Student.prototype.age = 15;
var studObj1 = new Student();
alert(studObj1.age); // 15
var studObj2 = new Student();
alert(studObj2.age); // 15
Every object which is made utilizing literal syntax or constructor syntax with the new keyword incorporates __proto__ property that focuses to prototype object of a function that made this object.
You can troubleshoot and see object's or function's prototype property in chrome or firefox's developer tool. Think about the following example.
Example: prototype
Example: prototype
function Student() {
this.name = 'John';
this.gender = 'M';
}
var studObj = new Student();
console.log(Student.prototype); // object
console.log(studObj.prototype); // undefined
console.log(studObj.__proto__); // object
console.log(typeof Student.prototype); // object
console.log(typeof studObj.__proto__); // object
console.log(Student.prototype === studObj.__proto__ ); // true
As should be obvious in above example, Function's prototype property can be accessed using <function-name>.prototype. However, an object (instance) does not expose prototype property, rather you can get to it utilizing __proto__.
Note: The prototype property is an exceptional type of enumerable object which can't be repeated utilizing for..in or for each loop.
Object's Prototype
As specified previously, the object's prototype property is invisible. Utilize Object.getPrototypeOf(obj) method rather than __proto__ to get to prototype object.
Thanks
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vinay Tiwari
Vinay is a bright UI developer, having knowledge of HTML, CSS, Bootstrap, Jquery and AngularJs. His hobbies are interacting with people, listening music etc.