Javascript object Constructor function allows us to create multiple similar objects easily. We invoke the constructor function using the new operator. In this tutorial, let us learn what is a constructor function, how to create a constructor, how to create multiple objects using the constructor function, and the role of the new operator in invoking the constructor function.
The constructor function is a regular JavaScript function that contains a recipe to create a new object. When we invoke it using the new operator it creates a new instance of the object and returns it.
By Convention, we capitalize the first letter of the constructor function name. But that is optional and JavaScript does not care.
The new operator lets us create and initializes a new object from a constructor function.
We create a constructor function similar to the way in which we create functions in JavaScript.
The following is the example of a Constructor function Person. The function accepts three arguments. You can pass as many arguments or no arguments to the function
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function() {
return this.firstName + ' ' + this.lastName;
};
}
Inside the function, we create properties and assign them to the object pointed by this.
We invoke it with the new operator and passing the value for each parameter. It will create a new person object and returns it.
let person = new Person('Alex', 'Ferguson', 50);
console.log(person);
console.log(person.fullName());
The new operator can be used on any function. For Example the following code works without any error.
function sayHello() {
console.log("hi")
}
new sayHello();
But, when we invoke any function with the new keyword, it does the following things
In the following example, the newClone function shows what new operator does behind the scene
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function () {
return this.firstName + ' ' + this.lastName;
};
}
//This function mimics new operator
function newClone(ConstFunc, ...theArgs) {
//1. Creates a new object
let obj = {};
//2. Sets prototype of constructor function as the prototype of newly created object
Object.setPrototypeOf(obj, ConstFunc.prototype)
//3. calls the ConstFunc using call and sets obj as its 'this'.
let ret = ConstFunc.call(obj, ...theArgs)
//4. if it returns Object then returns it as it is
if (ret == Object) return ret
//else return obj
return obj;
}
//Person created using the NewClone
personclone = newClone(Person, 'Alex', 'Ferguson', 50)
console.log(personclone );
//Person created using the new Operator
person = new Person('Alex', 'Ferguson', 50)
console.log(person);
You can compare both the objects. You will find that they are identical.
Use a function, if you wish to create multiple objects using the same recipe. The following example creates two Person objects.
function person(firstName, lastName, age) {
return {
firstName: firstName,
lastName: lastName,
age: age
}
}
let allie=person("Allie","Grater",50)
let Paul=person("Paul","Molive",25)
console.log(allie)
console.log(Paul)
The following example shows how we can create a new object without using the new operator. This will also create a new object identical to one using the new operator.
function Person(firstName, lastName, age) {
//Create an empty object
let obj = {};
//Assign properties & methods
obj.firstName = firstName;
obj.lastName = lastName;
obj.age = age;
obj.fullName = function() {
return obj.firstName + ' ' + obj.lastName;
};
//Setting the prototype of newly created object
Object.setPrototypeOf(obj, Person.prototype)
//return it
return obj;
}
let person = Person('Alex', 'Ferguson', 50);
console.log(person);
The constructor function makes it easier to create as many objects as you want, using the same pattern.
let person1 = new Person('Alex', 'Ferguson', 50);
let person2 = new Person('Santi', 'Argo', 40);
let person3 = new Person('Sarah', 'Moanees', 25);
The JavaScript includes constructors for its built-in types. We can use the new keyword to instantiate them as shown below.
// Create an empty object.
let o = new Object();
// Create an empty array
let a = new Array();
// Create a Date object representing
the current time
let d = new Date();
// Create a Map object for key/value
mapping
let r = new Map();
let person = new function() {
this.firstName = 'Barry';
this.lastName = 'Kade';
}();
console.log(person);
The constructor function returns this. Hence it is not common to have a return statement. But you can return any other object other than this then the new operator will use that
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.displayName = function() {
return this.firstName + ' ' + this.lastName;
};
let obj = {};
obj.firstName = 'Polly';
obj.lastName = 'Pipe';
return obj;
}
var person = new Person('Carmen', 'Sayid');
console.log(person);
***Console***
//{firstName: "Polly", lastName: "Pipe"}
But if you return a primitive data type like string, number, bigint, boolean, and symbol it is ignored and this is returned
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.displayName = function() {
return this.firstName + ' ' + this.lastName;
};
return '10';
}
var person = new Person('Carmen', 'Sayid');
console.log(person);
*** Console ****
Person {firstName: "Carmen", lastName: "Sayid", displayName: ƒ}
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.displayName = function() {
return this.firstName + ' ' + this.lastName;
};
}
function Car(make, model, owner) {
this.make = make;
this.model = model;
this.owner = owner;
}
let Carmen = new Person('Carmen', 'Sayid');
let Polly = new Person('Polly', 'Pipe');
var Jeep = new Car('Jeep', 'Compass Sport', Carmen);
var Nissan = new Car('Nissan', '300ZX', Polly);
console.log(Jeep.owner.displayName());
console.log(Nissan.owner.displayName());
