Prototype In Javascript

Prototype in Javascript is an object. JavaScript is a prototype-based language and depends on it to implement inheritance. Objects inherit the properties & methods of their Prototype. In this tutorial, we will learn what is Prototype?. How & when JavaScript adds Prototypes to an Object ?. How the Prototype chains are created etc.

What is a Prototype

A Prototype is an object, which JavaScript assigns to the [[Prototype]] property of an object when it creates it.

Take a look at the person object, which we created using the object literal syntax.

Prototypes in JavaScript

It has an additional Property __proto__. The __proto__ points to the Prototype object of the person object.

Prototype is a JavaScript Object

Prototype objects are just like any other Javascript object. If you expand the __proto__ node in the debugger console, you will that it points to an object.

Object.Prototype in JavaScript

In fact in the above example, the person.__proto__ points to the Object.prototype. You can verify it by running the equality checker.

The Object.prototype also have a __proto__ property. But it points to null

Hence the prototype relation between them is as follows

Prototype chain

An Object has a prototype. A prototype is also an object. Hence Even it may have its own prototype object. This is referred to as prototype chain

The following example creates a person object from the Person constructor function. In such a case the <functionName>.prototype i.e. Person.prototype becomes the Prototype of the newly created person object.

The following image shows the Prototype chain.

Prototype object can have a Prototype Object

You can verify the prototype chain.

The prototype chain looks something like this.

You can change the Prototype

In the following example, we create a employee & manager object from the Person function. Later we change the prototype of the employee to the manager object.

The following image shows the prototype chain

change the Prototype of an object

The prototype chain

One Prototype per object

An object can have only one Prototype. But it can become a Prototype of many other objects.

Constructor Property

If you notice in the above examples, all the prototype objects have a constructor property. The only exception is the manager prototype, which is the prototype we created manually.

The constructor property points to the constructor function that responsible for the creation of the prototype object. We will see it in the next section.

Objects without Prototype

You can create an object without a Prototypes using the Object.create method and passing null as its argument

object without a prototype

All the other ways of creating object will always result in objects getting a prototype object

Some Basics Terms

Here are some of the basic terms

[[Prototype]]

[[Prototype]] is the internal property of an object. It is hidden and we cannot access it directly. [[Prototype]] property can either point to null or to another object. The object that [[Prototype]] points become the prototype of the Object

There are two ways you can access the Prototype of an object. One using the __proto__ and the other using the getPrototypeOf method of the Object

__proto__ Property

The __proto__ is property accessor method (getter & setter). It returns the prototype of the object. Internally it accesses the [[Prototype]] property and returns the object that it points to.

__proto__ is Deprecated. Hence it is no longer recommended

Object.getPrototypeOf

The second and correct way to access the [[Prototype]] is by using the function Object.getPrototypeOf.

Constructor Functions

Functions are special objects in Javascript. Like all objects, they too have a prototype object. But they have not one but two Prototype objects. And that has been usually the source of confusion.

One is the Prototype of the function (__proto__ property) and the other one is the Prototype Property of the function (prototype property).

The following code creates a Person constructor function with the name property.

The console.log(Person) does not show anything except the function definition.

But let us check Person.__proto__ & Person.prototype.

Prototype of a function

Functions are nothing but special objects. Like all objects even they have prototypes. You can access it from __proto__ property.

The __proto__ property points to the [[Prototype]] of the function. You can access it using the Object.getPrototypeOf(Person)

But in this example, it is not Object.prototype

but it is Function.prototype

Incidentally Function.prototype also has a prototype. And it is Object.prototype

Hence our Prototype chain will look like this.

Prototype of a function

Prototype Property of the function

The function also has a prototype property. We usually refer to it as <functionName>.prototype. In this example it is Person.prototype. It also points to an object.

Now let us see the contents of the Person.prototype.

The Prototype the Person.prototype is Object.prototype. You can refer to it from the

The constructor property points to the constructor function that responsible for the creation of the prototype object.

It is the Person function that creates the Person.prototype. Hence the Constructor property of Person.prototype is Person function itself.

Prototype Property of a function

You can see the circular relationship between the Person function & Person.prototype object.

Finally, the Prototype of the function & the Prototype property of the function both together is as shown below.

Javascript function all Prototype relations

Create object using Constructor function

The prototype property of the function has a special purpose.

Whenever we create a new object from the function, the prototype property becomes the prototype of the newly created object. The prototype property is empty initially. but you can add properties and methods or even other objects.

Consider the following example of the Person constructor function. it will automatically come with the Person.prototype property.

Every object, that we create with the Person function will have the Person.prototype as their prototype. For Example both employee & customer object will get Person.prototype as their prototype.

You can verify it by comparing their prototypes.

Javascript Prototype example using constructor function

Constructor Property

The prototype objects have a constructor property.

The constructor property points to the constructor function that responsible for the creation of the prototype object.

//Example & image

Object.prototype

The JavaScript has a Object() constructor function. We can create new objects using that function.

As mentioned earlier, all functions have a prototype property. So is Object() function. It is Object.prototype

The Object.prototype is the default Prototype object. When we create an object and did not explicitly specify the prototype, then the Object.prototype is used as Prototype

Object.prototype also has a constructor property. Naturally, it points to the Object() function, because that is the function that created it.

object.prototype

Since the constructor property returns the Object function, we can use it to create a new object

The Object.prototype itself also has a prototype. But it is null

Built-in or Native Objects

There are many other built-in constructor functions in Javascript. The following tables list some of them.

Built in ObjectCorresponding Prototype
ObjectObject.prototype
ArrayArray.prototype
FunctionFunction.prototype
StringString.prototype
NumberNumber.prototype
DateDate.prototype
BooleanBoolean.prototype
BigIntBigInt.prototype
SymbolSymbol.prototype

String Object

The String() constructor function creates a new String Object. The String() function has a String.prototype property.

Hence the newly created objects will get String.prototype as their prototype

The Prototype of String.prototype is Object.prototype

Hence we get a following Prototype chain

String.prototype

Arrays

Array.prototype

Inheritance & Prototype

In this tutorial, we concentrated on what is Prototype & how JavaScript creates them. The Prototypes exist in JavaScript with the sole purpose of providing the inheritance feature. The next tutorial Prototype Inheritance looks into that.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top