Object Prototype

Rajat Agrawal
Last Updated: May 13, 2022

Introduction

Prototypes are the technique by which JavaScript objects inherit features from one another.

Prototypes are a flexible and robust feature that allows you to reuse code and combine objects.

Every function includes a prototype object by default. ​​The prototype object is a specific type of enumerable object that can have additional characteristics shared across all instances of its function.

Object prototyping in javascript has some essential uses like finding properties and methods of an object, implementing inheritance, etc.

Let’s learn about object prototypes in-depth.

JavaScript Prototypes

Let’s understand the Prototypes with the help of an example:

function Company() {
    this.fname = 'Coding';
    this.lname = 'Ninjas';
}

let c1 = new Company();
c1.city = 'Delhi';
console.log(c1.city);

let c2 = new Company();
console.log(c2.city);

Output: 

As you can see in the above example, the city property is attached to the c1 instance. However, the c2 instance will not have city property because it is defined only on the c1 instance.

So the problem that arises here is that we cannot add a new property to an existing object constructor.

To solve this problem, we use object prototypes.

Prototype: A prototype is an object associated with all functions and objects in JavaScript by default. The function's prototype property is accessible and editable, and the object's prototype property is hidden.

By default, every function includes a prototype object.

So, use the function's prototype property in the above example to have city properties across all the objects, as shown below:

function Company() {
    this.fname = 'Coding';
    this.lname = 'Ninjas';
}

Company.prototype.city = 'Delhi'

let c1 = new Company();
console.log(c1.city);

let c2 = new Company();
console.log(c2.city);

Output: 

With the help of the prototype, we can easily access the city property with any of the instances we create.

Note: The property that points to an object's prototype is not called prototype. Although its name isn't standard, all browsers use __proto__ in practice. The Object.getPrototypeOf() method is the most common technique to get an object's prototype.

Prototype Chain

Let’s try to understand the concept of the Prototypes chain with the help of an example.

Create an index.js file and paste the below code.

const Company = {
    fname: 'Coding',
    lname: 'Ninjas',
    greet() {
      console.log(`Greetings from ${this.fname} ${this.lname}`);
    }
  }

  Company.greet();
  console.log(Company);

This is an object with two data properties, fname, lname, and one method, greet(). If you type the object's name into the console, like console.log(Company), the console will pop up a list of all the properties available to this object. You'll see that as well as fname, lname, and greet, there are many other properties.

We can see this in the output below.

Output:

These extra properties we see are the prototypes. The prototype is itself an object, so the prototype will have its own prototype, making a Prototype Chain. The chain ends when we reach a prototype that has null for its own prototype.

When you try to access a property of an object, the prototype is sought for the property if it can't be located in the object itself. If the property is still not found, the prototype's prototype is examined, and so on, until the property is found or the chain comes to an end, at which point undefined is returned.

Prototype Use

JavaScript prototypes are a powerful and flexible feature that allows you to reuse code and combine objects.

The JavaScript engine is using the Prototype object:

1.) To find the Properties and Methods of an object.

2.) To implement Inheritance in JavaScript.

Inheritance is a feature of object-oriented programming languages that allows programmers to express the idea that certain system objects are more specialized copies of others.

All JavaScript objects inherit properties and methods from a prototype:

1.) Date objects inherit from Date.prototype.

2.) Array objects inherit from Array.prototype.

3.) Person objects inherit from Person.prototype.

The Object.prototype is on the top of the prototype inheritance chain.

Date objects, Array objects, and Person objects inherit from Object.prototype.

FAQs

1. Define the Prototype.

Prototypes are the technique by which JavaScript objects inherit features from one another. They are a flexible and robust feature that allows you to reuse code and combine objects.

2. Mention two uses of Prototypes. 

The JavaScript engine is using the Prototype object:

    1.) To find the Properties and Methods of an object.

    2.) To implement Inheritance in JavaScript.

3. Which prototype is on the top of the prototype inheritance chain?

The Object.prototype is on the top of the prototype inheritance chain.

Key Takeaways

In this article, we have extensively discussed Object Prototypes in JavaScript, how the prototype chain works, and the uses of Prototypes. If you want to learn more, check out our article on An Introduction to Javascript.

Do upvote our blog to help other ninjas grow.

Happy Coding!

Was this article helpful ?
0 upvotes