Prototype and Prototype Chaining With Object Oriented JavaScript

We have always seen that every object in JavaScript has some pre-defined methods. To know about the, we have to find answers to these questions:

What is a prototype?
What is prototype chaining?
What does hasOwnProperty do?
What is __proto__?

We'll look into it and come to know where all these methods come from. Nearly all objects in JavaScript are instances of Object. That means all the objects in JavaScript inherit the properties and methods from Object.prototype. This is called Prototype chaining. This is a very powerful and potentially dangerous mechanism to override or extend object behavior.

Objects created using the new keyword inherit from a prototype called Object.prototype.

For example: If a date object [new Date()] is created with the new keyword, then it inherits the Date.prototype.

We have Date, Array, Function, RegExp in the list for the same. All these objects inherit from the Object.prototype.

We should never alter or change the predefined methods or properties of a prototype, It may cause inappropriate failure, which may be difficult to debug.

To check whether the object has a property or not, we use hasOwnProperty() method. For example if we have the age property in any object, we can check it with the help of the hasOwnProperty() method. We will come to know more about it in this blog.

Let’s take a look at a quick example of prototype chaining.

In this example, we will create a class and add a prototype object in the same. After instantiation of the object, we will be able to use the prototype of the class. This is simply object prototype chaining.

> function Person(firstName, lastName, age){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

//Person class created

Person.prototype.getFullName = function(){
  return this.firstName + ” ” + this.lastName;
}

// we have added getFullName method in Person’s prototype.
> var person = new Person(“pushpendu”, “purkait”, 25);
// It will create an instance of the Person class

> person.hasOwnProperty(“firstName”);  // true
> person.hasOwnProperty(“getFullName”);  // false

> person.getFullName(); // pushpendu purkait

In the above code, we used hasOwnProperty() method to check whether we have getFullName method as a property of the object. It returned false, that means there is no such property. But, when we used getFullName method, it returned the actual full name but the property was not there.

How can that be possible?

To know more we have to dig in. As the getFullName() method was not there in the object but still we were able to use it. We should not forget that we added the method in class Person’s prototype. The method went to the object through prototype chaining. It means the class had the method in its prototype, which went to its instance (person object) through prototype chaining. To prove that we will check it in the object.

Whenever we create an instance of any class, the prototype of the class is created in object as well. We have to check it in  __proto__  property. This property contains the prototype of its class. For example: Person’s getFullName() method will be created in object’s __proto__ property.

Let’s take a look into the code:

person.__proto__.hasOwnProperty(‘getFullName’);  //true

As we can, see __proto__ has the getFullName() method, which is taken from class Person.

We can see more methods and properties like
__defineGetter__, __defineSetter__, __lookupGetter__, __lookupSetter__, constructor etc. which are there because of prototype chaining.

I hope you enjoyed and learned something new from this post.