In this article, we will discuss object creation & prototypes, along with understanding the different ways for object creation & their implementation through the examples. Prototypes are the mechanism by which objects in JavaScript inherit features from another object. A prototype property is also an object whose methods and properties will be inherited by any new object.
A simple object in JavaScript can be compared with real-life objects with some properties. For instance, an Employee can be considered as an object, having the properties like “name”, “age”, “department”, “id”, etc, which is unique for each employee.
Here are some common approaches to creating an object with a prototype in javascript.
- Using Object Literal
- Using Prototypes
- Using Constructor
- Using function constructor
- using functions in a Constructor function
Approach 1: Using Object Literal
The first method to create an object is by using Object Literal. It describes the methods and properties that the object will inherit directly.
Syntax:
let Object = {name: "value", id: "number" , category: "section"}
Example:
Javascript
let Student = { name: "neveropen", age: 18, class: 11, roll: 34, section: "F"}console.log(Student); |
{ name: 'neveropen', age: 18, class: 11, roll: 34, section: 'F' }
Another method to create an object is by defining its prototype.
Approach 2: Using Prototypes:
Every JavaScript function has a prototype object property that is empty by default. We can initialize methods and properties to this prototype for creating an object.
Syntax:
let obj = Object.create(Object_prototype)
Example:
Javascript
let Employee = { id: 565, department: "Finance"}let Employee1 = Object.create(Employee);console.log("id :", Employee1.id);console.log("department :", Employee1.department); |
id : 565 department : Finance
Approach 3: Using Constructor:
This is a function that is used to define an object and its properties. this keyword is used to assign a value to these properties of the object.
Syntax:
function Object(property1, property2) {
this.property1 = property1;
this.property2 = property2;
}
let obj = new Object(property1, property2);
Example:
Javascript
/* constructor function that will define prototype of an Employee object */function Employee(name, id, job) { this.name = name; this.id = id; this.job = job;}// This will show Employee's prototypeconsole.log(Employee.prototype); |
{}
{constructor: ƒ}
constructor: ƒ Employee(name, id, job)
[[Prototype]]: Object
Here, a constructor of an Employee object is defined that contains basic details of an Employee i.e. name, id, and job.
Approach 4: Using function constructor
We can create an Employee object using this Employee function constructor which will inherit the properties of this constructor.
Syntax:
let Object1 = new Object(property1, property2, property3)
Example:
Javascript
function Employee(name, id, job) { this.name = name; this.id = id; this.job = job;}// creating an Object from prototypelet Employee1 = new Employee('Stephen', 2364, 'developer');console.log(Employee1);let Employee2 = new Employee('Maria', 8896, 'tester');console.log(Employee2); |
Employee { name: 'Stephen', id: 2364, job: 'developer' }
Employee { name: 'Maria', id: 8896, job: 'tester' }
Approach 5: Using functions in a Constructor function
We can also add certain functions in a Constructor function, which can be called for any object.
Example:
Javascript
function Employee(name, id, job) { this.name = name; this.id = id; this.job = job;}/* Adding intro() method to the Prototype property of Employee */Employee.prototype.intro = function () { console.log('My name is ' + this.name + ' and I am a ' + this.job);};// Creating an Object from prototypelet Employee1 = new Employee('Stephen', 2364, 'developer');let Employee2 = new Employee('Maria', 8896, 'tester');// Using intro method for Employee objectsEmployee1.intro();Employee2.intro(); |
My name is Stephen and I am a developer My name is Maria and I am a tester
After creating two objects Employee1 and Employee2, we called Employee1.intro() and Employee2.intro() . At first, it will check if the property’s name and job are present in the respective objects. If not, then that property will be considered undefined. Thus, a constructor defines all the properties and methods that an object will inherit.
