In JavaScript, a prototype is an object from which another object is inherited.

When I was using console.log() for an object in the browser console, that is when I first encountered the word "prototype" in JavaScript.

After seeing my own properties, which I had purposefully constructed, I continued with my debugging. Since I hadn't made it and assumed it had something to do with the language and wasn't worth worrying about for now, I had entirely disregarded the prototype object that was displayed in the console.

Everyone who has experience with class-based object-oriented design, where classes are clearly defined together with their attributes and functions, encounters this problem.

But JavaScript is distinct from class-based languages. The prototype-based language JavaScript has a very dynamic nature.

JavaScript allows you to start with an empty object and continuing adding properties dynamically.
In contrast, class-based languages require that the characteristics be defined explicitly prior to compilation.

You could believe that JavaScript already uses the class keyword from ES2015, but classes in JavaScript still operate on a prototype-based model.

However, now that JavaScript is widely used for front-end and back-end development, it is crucial for us to comprehend the language features of prototype and prototype chaining in JavaScript.

In our last piece, we covered the numerous approaches to creating a JavaScript object.
Check out the article by clicking this link: Creating Objects with JavaScript.

What is a prototype and prototype chaining in JavaScript will be explained in this post.


In JavaScript, a prototype is an object from which another object is inherited.

In class-based languages, a class is the container for all of the methods and attributes that have been defined for the class.

The public methods and attributes defined inside the class are accessible to the newly formed object when the object of the class is created.

Prototype and the class that serves as the model for JavaScript objects are extremely similar.

In addition to its own properties and methods, the newly produced JavaScript object has access to all of the properties and methods of the prototype from which it was constructed.

Due to JavaScript's dynamic nature, we can also dynamically add properties to the prototype object. This would entail adding a property or behavior to the base class at runtime so that the properties added dynamically to the prototype object are accessible to all newly produced objects.

function Student(name,age){ = name;
    this.age = age;

let student1 = new Student('John',32)
let student2 = new Student('Mary',32)


student1.sports = 'Cricket';

Student.prototype.gender = null

let student3 = new Student('Shailesh',26)

Prototype Chaining

JavaScript uses prototypes as its inheritance mechanism. An item's prototype would also include the actual thing. This goes on until there is no longer a prototype object at the top level.

In JavaScript, this is referred to as prototype chaining or prototype chain.

The prototype objects' defined properties are also available to the object instance. And it is for this reason that we can access attributes that we have not explicitly defined on an object since they are accessible through inheritance via prototype chaining.

Any time we attempt to access a property of an object, the object's own property is examined first.

If the property is missing from the own property, it is scanned for in the prototype object. This continues until the requested attribute is obtained or the prototype chain ends with an undefined result.

Performance Effects of Prototype Chaining

The overall time to search up a property that is at a higher level of prototype chaining may have a detrimental impact on performance in the code where performance is of the utmost concern due to the various levels of prototype chaining.

Additionally, there may be instances where we attempt to search up a property that does not exist, but since the property must be looked up on the prototype chain until we reach the end, we risk wasting time in the lookup process.

The function hasOwnProperty() function, which all objects inherit from Object.prototype in order to limit the lookup to a specific level, can be used to prevent such a circumstance.

The property name we are looking for is passed to function hasOwnProperty(), which then returns true or false depending on whether the property was located or not.

Keep in mind that a JavaScript object's properties can be accessed as well as its functions.

function Student(name,age){ = name;
    this.age = age; 

const student = new Student('Shailesh',32)

The prototype object of the Student function Object() constructor, which also has a prototype object descended from the Object function Object() constructor, which does not have a prototype object since Object is the top level of the prototype chain, is the first level of the prototype chain as seen in the image above.
By using Object.getPrototypeOf or the proto property of the object instance, we may retrieve the prototype of the object instance (obj)

The following methods can be used to obtain the student object prototype in the example above:

  1. Object.getPrototypeOf(student)
  2. student.__proto__
  3. Student.prototype

The preceding statements would all produce the same output when executed in the console, but if we tried Object.getPrototypeOf(Student) in the console, the output would differ. Instead of the object instance student, Tt would return the prototype of the function Object() { [native code] } function student.

I hope you have a basic understanding of -

  1. How is class-based object oriented design different from JavaScript.
  2. Describe a prototype.
  3. What does JavaScript's prototype chaining or prototype chain mean?
  4. Performance Effects of Prototype Chaining

I hope you will like the content and it will help you to learn What is prototype and prototype chaining in JavaScript
If you like this content, do share.

Recommended Posts

View All

What is the purpose of the array splice method

The array splice method in JavaScript can be used to add or remove elements from an array. Learn how to use it and what its purpose is in this guide.

The Difference Between Slice and Splice in JavaScript

Discover the nuances between slice() and splice() in JavaScript. Learn how to use these methods to manipulate arrays with ease. Read on to find out mo...

What is the difference between Call, Apply and Bind

Looking to learn about the differences between Call, Apply, and Bind in JavaScript? This article breaks down the nuances of each method and provides c...

What is currying function in JavaScript ?

Currying function in JavaScript allows you to transform a function that takes multiple arguments into a series of functions that each take one arg.

Differences between JavaScript Map and Object

Discover the key dissimilarities between JavaScript Map and Object. Learn how they store data, handle key collisions, and their performance trade-offs...