User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper Prototype in JavaScript - Behind the Scenes

In previous post we learnt First step of Object Oriented JavaScript and today we will do some deep diving in that object so we can know how these process run in background when we create object in JavaScript.

 

What we do today just again reshape the object creation  in depth and discussed advanced topics like using the Object in JavaScript with custom objects, inheritance in JavaScript and most popular word for interviewer prototypes in JavaScript.

 

I hope end of this articles you can gain some depth information regarding the above topics with some new concepts & ideas.

So we start with Introduction of the Object:

Here are some available definition of Object on internet word:-

"An object is a collection of properties, and a property is an association between a name and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects."

 

 "An object is an unordered list of primitive data types (and sometimes reference data types) that is stored as a series of name-value pairs. Each item in the list is called a property (functions are called methods). "

 

 In all available definition we found a common point that "in JavaScript object is an associative array (called hash in some languages). It gathers information in key-value pairs & this can be properties or method. We can say object is wrapper of Object properties & Object Methds & store in key valye pairs."

Before going to start with Object, we should know that there are several core or native object available in JavaScript. We can use that any where in our programming.

  • Number
  • Boolean
  • String
  • Array
  • Date
  • Math
  • RegExp

 

 

Now we start with Custom object with process of Creating Objects:

var apple={};

 

Mostly developer used the above code to initialize or create Object in JavaScript instead of typing the "new Object()". Which was popular in old times or we can say popular in bookie style.

At the bottom line is that when above code executed, we will have an object named apple whose type is Object. But what, it is like the above simple...

The above created object is not a simple as it looks. So, what we do just look the deep into object and find what happened behind the scene?

When we dive into object found that create object is not independent or can say not alone, it has a connection to the main Object types that it derives from.


 

So what we got, every custom object derived from base Object.

When we talk about apple is an empty object. While there we don't defined any properties with that. But there is always a special internal property exists with every defined object called _proto_ and often we represent them as [[Prototype]].That properties point to base Object. You can also find that with debugging mode with every object.

Confused? What is happening here or What the [[Prototype]] property reference is what is known as a prototype object.


 

Now we discussed in details. A prototype object is the reference point of source that another object is based on. If we go through our example, the apple  object is created on the base of Object type. How can we prove that, we already knew that apple contains no properties of its own, but due to relation with Object type, we can access any properties the Object contains through apple itself.


Look the following code:

var apple={};

apple.toString(); // [object Object]

 

In above code we are calling the toString() method with the apple object. But that didn't return any error instead of that return the specific result. But how can this happen? Due to parent/child relation which base Object apple access the properties of base Object.


 Now we dive into more depth and find what is happening here?

 

>> When we call apple.toString() -- JavaScript engine acted as like, Hey apple! I am going to call toString() on you.

>> But apple object replied with a, Hey, I don't know what you are talking about. I don't have any information regarding that.

>> The JavaScript engine replied, Well, then I am going to check your prototype object and see if they have any information about called property "toString".

 A few milliseconds later, after finding the prototype object thanks to the [[Prototype]] property,

>> JavaScript engine says, Hey Object my old friend! Do you have a toString() property?

>> The Object replies with "yes and call the toString() method for apple object."

 

This above interaction is the part of known as Prototype Chain. So if an object doesn't have what we are looking for, the JavaScript engine will navigate to the next object as referenced by the [[Prototype]] and keep going untill it reaches the very bottom line. The very bottom line is the Object so we can't go further beyond the Object, since that is as basic of a type as you can get.


Finally I hope we knew that how Prototype work behind the scene with JavaScript engine and how we prove that through prototype we can implement Inheritence in JavaScript.


Suggestion are welcome.


crazydeveloper Home Page 01 July 2015

Become a Fan