How to create an object with prototype in JavaScript ?

01 Dec, 2021
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. 
1. 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:
var Object = {name: "value", id: "number" , category: "section"}
Example:
Javascript
<script>    var Student = {        name: "GeeksforGeeks",        age: 18,        class: 11,        roll: 34,        section: "F"    }    console.log(Student); </script>
Output:
{name: 'GeeksforGeeks', age: 18, class: 11, roll: 34, section: 'F'}
Another method to create an object is by defining its prototype.
2. 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:
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>        Basic Example to Describe Object Prototype    </title></head>  <body>    <script>        let Employee = {            id: 565,            department: "Finance"        }          let Employee1 = Object.create(Employee);          console.log(Employee1.id);        console.log(Employee1.department);        // Output : 565        // Output : Finance      </script></body>  </html>
Output:
565
Finance
Another method is to create a constructor function to define an object.
3. 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;
}
var obj = new Object( property1, property2 );
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>        Basic Example to Describe Object Creation    </title></head>  <body>    <script>          /* 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);    </script></body>  </html>
Output:
constructor: ƒ Employee(name, id, job)
Here, a constructor of an Employee object is defined that contains basic details of an Employee i.e. name, id, and job.
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:
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>        Basic Example to Describe Object Creation    </title></head>  <body>    <script>        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);      </script></body>  </html>
Output:
Employee {name: 'Stephen', id: 2364, job: 'developer'}
    id: 2364
    job: "developer"
    name: "Stephen"
    
Employee {name: 'Maria', id: 8896, job: 'tester'}
    id: 8896
    job: "tester"
    name: "Maria"
Here, we created two Employees Employee1 and Employee2 using the Employee constructor function which acts as a template for Employee’s objects.
We can also add certain functions in a Constructor function, which can be called for any object. 
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>        Basic Example to Describe Object Prototype    </title></head>  <body>    <script>        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();    </script></body>  </html>
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.
javascript-object
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?