In this tutorial, you will learn about the JavaScript constructor function and and the new Operator .how to use the new operator keyword objects.
In OOPs programming, before objects are created a very limited way and we did was to use some simple object literal, and now that all changes with constructor functions.
A difference between a regular function and a constructor function is that we call a constructor function with the new operator. OK, Let's go into details.
In JavaScript, A constructor is a special function used to create an object instance of a class.
'use strict';
// constructor function
const User = function (firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
//create an object
const User = new User ('chandra' ,'kumar');
console.log(User);
chandra kumar
In the above, the constructor is used to create a new object and set values of an existing object and the JavaScript calls the constructor when the object is created using the new keyword. And the name of a constructor function is starts with a capital letter.
In the example, we are creating a new user object with two properties firstName and lastName. In the process the constructor invokes in JavaScript, the operation creates a new empty object.
Read also:
Javascript to change the background colour font checkbox
what is domain and web hosting
How to buy best wordpress hosting plan
8 Best Free Keyword Research Tools for SEO
write a code to retrieve data from table into a datagridview in csharp
When we use this keyword in the JavaScript constructor, it refers to the new object and becomes the current instance object.
Create Multiple objects:
We can use this constructor function to create as many different objects as we want to create objects based on this new User1, User2, and User3 operator following a constructor function. Now the blueprint will be the actual User function and each of them is its own new object that we created programmatically, using a constructor function.
// constructor function
const User = function User (firstName,lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
// create objects
const User1 = new User('Anbu', 'mannan');
const User2 = new User('GTR' , 'Aravindh');
const User3 = new User('chandra' ,'kumar');
console.log(User1,User2,User3);
So this is the basics of constructor functions and now above code, we give them the exact same name as the parameters that we're passing in here firstName and lastName in the User function, and then automatically returned data from the constructor function.
const User = function User (firstName,lastName,age)
{
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
// create objects
const User1 = new User('Anbu', 'mannan', 25);
const User2 = new User('GTR' , 'Aravindh',26);
const User3 = new User('chandra' ,'kumar',21);
console.log(User1.firstName,User2,User3);
Anbu
User
firstName : "GTR"
lastName : "Aravindh"
[[prototype]]:Object
User
firstName : "chandra"
lastName : "kumar"
[[prototype]]:Object
Create JavaScript Object Prototype:
Use properties and methods to a constructor function using a prototype. For example,
In the below code, add a new property age is added to the constructor using a prototype. It is shared the age to all the User object and output return age is same.
const User = function User (firstName,lastName,age)
{
this.firstName = firstName;
this.lastName = lastName;
}
// create objects
const User1 = new User('Anbu', 'mannan');
const User2 = new User('GTR' , 'Aravindh');
const User3 = new User('chandra' ,'kumar');
User.prototype.age = 21;
console.log(User1.age,User2.age,User3.age);
21 21 21