In this tutorial you will learn about how to JavaScript prototype this keyword works in the prototype in the JavaScript.
const User = function User ()
{
this.firstName = 'chandra';
this.lastName = 'kumar' ;
}
const User1 = new User();
User1.age = 28;
console.log(User1.age);
const User2 = new User();
console.log(User2.age);
28
undefined
In the above code example, age properties are attached to the User1 instance. and the User2 instance will not have age property and the console result of undefined, because
the age is defined only in User1.
In this case, the prototype is associated with all functions and objects by the default JavaScript, where the prototype property is easy to access and modify the objects.
For example, the prototype is the special type of enumerable object to easily add the properties and share across all the instances of its construction function.
const User = function User ()
{
this.firstName = 'chandra';
this.lastName = 'kumar' ;
}
User.prototype.age = 28;
const User1 = new User();
console.log(User1.age);
const User2 = new User();
console.log(User2.age);
28
28
How does all of that JavaScript prototype this actually work?
Well, it can be summarized like this. So, first, each and every function in JavaScript automatically has a property called prototype. And that includes, of course, constructor functions.
Now every object that's created by a certain constructor function will get access to all the methods and properties that we define on the constructors prototype property.
So, continuing on the previous articles in our case, this would be a User dot prototype. So the prototype property of the constructor function. So again, as I was just saying, all the objects that are created through this constructor function here will inherit, so they will get access to all the methods and properties that are defined on this prototype property.
And so let's not actually add a method to this prototype property. And so, this is actually an object. Now create age and then we can simply set it to this same function here, so equal, and that's it.
But now there is the Age method with the date of birth, so this one that we just defined down here. each object created by this constructor function will now get access to all the methods of this prototype property.
using this constructor function can basically reuse this function on themselves. And so, this keyword, of course, is in each of them. And always set it to the object that is calling the method. And so here that's User1 and here that's gonna be User2
So just like we learned previously article example JavaScript Constructor function and the new Operator with examples
const User = function User (firstName,lastName,age)
{
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
const User1 = new User('Anbu', 'mannan',1993);
const User2 = new User('GTR' , 'Aravindh',1983);
const User3 = new User('chandra' ,'kumar',1993);
User.prototype.dob = function (){
console.log(2022 - this.age);
}
User2.dob();
39
Well, it works because any object always has access to the methods and properties from its prototype. And the prototype of User1 and User 2 is the User.prototype.dob function and it's somehow connected to the constructor User.
Let's take a look of a prototype of User
console.log(User1.__proto__); //object
console.log(User1.__proto__ === User.prototype); //return boolean
console.log(User1.prototype); //undefined
console.log(User.prototype); //object