JS OOPs: JavaScript Constructor Method
In this article, you'll get to understand the JavaScript constructor method.
A constructor is a function that makes an instance of a class, often known as an "object." A constructor is called whenever you declare an object in JavaScript using the new keyword.
A constructor's aim is to build an object as well as set values for any object properties that are present. It's a great technique to build an object since you don't have to explicitly declare what to return because the constructor function returns the object that is generated within it by default.
What Happens When a Constructor Gets Called?
When a constructor is called in JavaScript, the following processes are performed:
- A new empty object is made.
- The "this" keyword starts referring to the new object, which becomes the current instance object.
- The new object gets returned as the constructor's return value.
The Object Constructor Function
To build objects with a constructor function, just specify a JavaScript function with any number of parameters (arguments). The "this "keyword is used as a placeholder for the object getting created within the function. This has no value if the constructor function is applied without the new statement.
A constructor function should be capitalized.
function Laptop(brand, size, year) { this.brand = brand; this.size = size; this.year = year; } var laptop1 = new Laptop('Macbook', '13inch', 2017); var laptop2 = new Laptop('Macbook', '13inch', 2019); console.log('Laptop 1 is a ' + laptop1.year + ' ' + laptop1.brand + ' ' + laptop1.size); // Output: Laptop 1 is a 2017 Macbook 13inch console.log('Laptop 2 is a ' + laptop2.year + ' ' + laptop2.brand + ' ' + laptop2.size); // Output: Laptop 2 is a 2019 Macbook 13inch
The Class Constructor Method
A special constructor method is defined while defining a Javascript class. The constructor method, similar to the object constructor function, can take any number of parameters (arguments), and the "this" keyword can serve as a placeholder for the object being built.
class Laptop { constructor(brand, size, year) { this.brand = brand; this.size = size; this.year = year; } } var laptop1 = new Laptop('Macbook', '13inch', 2017); var laptop2 = new Laptop('Macbook', '13inch', 2019); console.log('Laptop 1 is a ' + laptop1.year + ' ' + laptop1.brand + ' ' + laptop1.size); // Output: Laptop 1 is a 2017 Macbook 13inch console.log('Laptop 2 is a ' + laptop2.year + ' ' + laptop2.brand + ' ' + laptop2.size); // Output: Laptop 2 is a 2019 Macbook 13inch
Constructor Function Vs. Object Literal
Object Literal is used to generate a single object. If you wish to create several objects, use the constructor function. As an example,
// using object literal let person = { name: 'Korg' }
// using constructor function function Person () { this.name = 'Korg' } let person1 = new Person(); let person2 = new Person();
Each object produced by the constructor function is different. You can use the exact properties as the constructor function, or you can add a new property to a specific object. As an example,
// using constructor function function Person () { this.name = 'Korg' } let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 18;
This age attribute (property) is now exclusive to the person1 object and is not available to the person2 object.
If an object is created using an object literal and a variable is defined using that object value, whatever changes are made to the variable value will affect the original object. As an example,
// using an object lateral let person = { name: 'Korg' } console.log(person.name); // Korg let student = person; // changes the property of an object student.name = 'Korg'; // changes the origins object property console.log(person.name); // Korg
Any object variable derived from an object generated using an object literal will operate as a duplicate of the original object. As a result, whatever alteration you make to one item will also affect the other.
Addition of Methods And Properties in an Object
In an object, you can include the following methods or properties as shown below:
// constructor function function Person () { this.name = 'Anita', this.age = 18 } // creating objects let person1 = new Person(); let person2 = new Person(); // adding property to person1 object person1.gender = 'female'; // adding method to person1 object person1.greet = function () { console.log('hi'); } person1.greet(); // hi // Error code // person2 doesn't have greet() method person2.greet();
JavaScript Object Prototype
A prototype may also be used to add methods and properties to a constructor function. As an example,
// constructor function function Person () { this.name = 'Anita', this.age = 18 } // creating objects let person1 = new Person(); let person2 = new Person(); // adding new property to constructor function Person.prototype.gender = 'Female'; console.log(person1.gender); // Female console.log(person2.gender); // Female
Learn more about Javascript Prototypes HERE