How to create an object with prototype in JavaScript ?

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: "GeeksforGeeks",
    age: 18,
    class: 11,
    roll: 34,
    section: "F"
}
console.log(Student);

Output

{ name: 'GeeksforGeeks', 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);

Output

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 prototype
console.log(Employee.prototype);

Output

{}

{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 prototype
let Employee1 = new
    Employee('Stephen', 2364, 'developer');
console.log(Employee1);

let Employee2 = new
    Employee('Maria', 8896, 'tester');
console.log(Employee2);

Output

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 prototype
let Employee1 = new Employee('Stephen',
    2364, 'developer');
let Employee2 = new Employee('Maria',
    8896, 'tester');

// Using intro method for Employee objects
Employee1.intro();
Employee2.intro();

Output

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.