How to create an object with prototype in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to explore prototypes and their creation in JavaScript. We will learn about how to create objects and how to implement them with the help of examples.

Prototypes can be defined as a mechanism that lets the objects of JavaScript inherit features and properties from another object. A prototype property is also an object whose methods and properties can be inherited by a new Object.

A real-life object always has some properties associated with it. For instance, a Student object should have the following properties: name, rollNumber, class, subjects, age, etc.

We can create an Object using prototypes in multiple ways. Some are defined below −

1. Object Literal

The first method of creating an object is by using the Object Literal. It describes the methods and properties of the object that will be inherited directly.

Syntax:

var Object = {name: "value", id: "number", category: "section"}

Example 1

In the below example, we are creating an object by using the object literal.

# index.html

<!DOCTYPE html>
<html>
<head>
   <title>
      Creating Objects from Prototype
   </title>
</head>
<body>
   <h2 style="color:green">
      Welcome To Tutorials Point
   </h2>
</body>
<script>
   var employee = {
      name: "Steve",
      age: 34,
      designation: "CEO",
      empId: 21,
      manager: "Mark"
   }
   console.log(employee);
</script>
</html>

Output

On successful execution of the above program, the browser will display the following result −

Welcome To Tutorials Point

And in the console, you will find all the results, see the screenshot below −

2. Prototypes

Every JavaScript function has a default prototype object. This prototype can be used for creating an object by initializing methods and properties.

Syntax

let obj = Object.create(Object_prototype)

Example 2

In the below example, we are creating an Object from a Prototype.

# index.html

<!DOCTYPE html>
<html>
<head>
   <title>
      Creating Objects from Prototype
   </title>
</head>
<body>
   <h2 style="color:green">
      Welcome To Tutorials Point
   </h2>
</body>
<script>
   let student = {
      id: 21,
      class: "XI",
      subjects: "PCM"
   }
   let studentV1 = Object.create(student);
   console.log("Id: " + studentV1.id);
   console.log("Class: " + studentV1.class);
   console.log("Subjects: " + studentV1.subjects);
</script>
</html>

Output

On successful execution of the above program, the browser will display the following result −

Welcome To Tutorials Point

And in the console, you will find all the results, see the screenshot below −

3. Constructor

We can use the constructor for defining an object and its properties. this keyword is used for assigning the values to these properties of an object.

Syntax:

Prototyping the Object

function Object(property1, property2) {
   this.property1 = property1;
   this.property2 = property2;
}
var obj = new Object( property1, property2 );

Defining the Object with the above constructor

let obj = new Object(property1, property2, property3)

Example 3

In the below example, we are going to use constructors for defining the object and its properties.

# index.html

<!DOCTYPE html>
<html>
<head>
   <title>
      Creating Objects from Prototype
   </title>
</head>
<body>
   <h2 style="color:green">
      Welcome To Tutorials Point
   </h2>
<script>
   function Student(name, rollNo, subjects) {
      this.name = name;
      this.rollNo = rollNo;
      this.subjects = subjects;
   }
   // Defining the prototype
   console.log("Student Prototype: " + Student.prototype);
   // Creating an Object from the prototype
   let student1 = new
      Student('Steve', 21, 'PCM');
   console.log(student1);
   let student2 = new
      Student('Mark', 30, 'Commerce');
   console.log(student2);
</script>
</body>
</html>