Prototype & Prototype chaining with Object Oriented JavaScript

We have always seen that every object in JavaScript has some pre-defined methods.  To know about it we have find answers of these questions.
What is prototype ?
What is prototype chaining ?
What does hasOwnProperty do ?
What is __proto__ ?

We will have a look into it and we will come to know where do 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 new keyword, inherit from a prototype called Object.prototype.

For example: If a date object [new Date()] is created with 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 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 age property in any object, we can check it with help of 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 prototype object in the same. After instantiation of the object, we will be able to use prototype of the class. Which 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 into it. 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 it’s prototype, which went to it’s 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 it’s 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 with the blog.