Hello everyone, in this article, we are going to take a look at a very important topic in javascript which is prototypes. We will also take a look at the prototype chain.

Prototypes

Prototypes are the mechanism by which JavaScript objects inherit features from one another - MDN Docs

Whenever we create an Array, Object, Function, etc. in javascript, they inherit methods and properties from their prototype. A prototype is another object that is treated as a fallback source for the methods and properties.

The way this works is we have a prototype property on a constructor function. Now, whenever we create a new object using this constructor function, all the properties and methods defined in the prototype property of the constructor function are assigned to the newly created object under the __proto__ property. So, the -__proto__ property of any object in javascript will reveal what is its prototype object.

function Person(name,city) { // Defining the Constructor Function
  this.name = name;
  this.city = city;
}

Person.prototype.displayName = function() { //Adding a method the the constructors prototype property
  console.log(this.name);
}

const person = new Person("John");

person.displayName();

As we can see from the example above that the person variable has access to the displayName function because it has been defined in its prototype i.e. the Person.prototype and hence, was assigned to the __proto__ property of the person variable.

If we take a look at the __proto__ property of the person variable, we can see the displayName function as one of its methods.

__proto__ vs prototype property

It's very easy to confuse the __proto__ and the prototype property.

The prototype property exists on the constructor function. This property is an object and consists of all the methods and properties that we want all the object instances created using that constructor function to inherit.

The __proto__ property exists on the object instance itself. This property is also an object and contains the methods and properties from the prototype property of its constructor function.

Prototype Chain

Now that we've understood how prototypes work, let's understand the prototype chain.

We saw that we can check the prototype of any object using the __proto__ property. Now, that prototype itself can have a prototype and that too can have its own prototype. This forms a chain of prototypes which is called the Prototype Chain.

Let's take a look at an example to understand this a bit better

First, let's create an array

const arr = [1,2,3];

Now, let's check its prototype

As we can see the array's prototype is Array.prototype. It's this prototype that gives us access to methods like map, reduce, filter, forEach, etc.

Similarly, a function will have Function.prototype as its prototype and an object will have Object.prototype as its prototype.

Now, let's check the Array prototype.

It's the Object.prototype, the king of all prototypes, which sits at the top of the prototype chain. All variables/functions in javascript will have Object.prototype as one of the prototypes. This is why it is often said that

Everything in javascript is an object

And, the Object prototype will be null.

Now, we've reached the end of the prototype chain. This is how a prototype chain is formed.

An Object with no prototype

As we saw above, that all variables/functions in javascript will have Object.prototype as one of its prototype, and that it sits at the top of the prototype chain.

So, one might think that "Can we have an object with no prototype?".

The answer to that is YES!!

We can use the Object.create method. The Object.create method creates a new object, and sets the prototype for the newly created as the argument passed to it.

Syntax and example

//Syntax

Object.create(proto)
//proto - Object to be used for the newly created object


//Example

const person = {
  name: "Tej",
} 

const person2 = Object.create(person); // Setting person as the prototype for the person2 object

console.log(person2.__proto__ === person) // Expected Output: true

Using this knowledge, we can create an object using this method and pass null as the argument to create a new object with no prototype

const object = Object.create(null);

Conclusion

That's it for now. We looked at prototypes, prototype chain, and how to create an object with no prototype. I'd recommend the following resources to further your knowledge about prototypes.

Prototypes-MDN Docs

Inheritance and prototype chain - MDN Docs