Greeting All,

To know the kind of stuffs like: “How the thing are working behind the scene is always a good approach and also gives more arrows in our bow to use the concept a bit better”.

Welcome back, This is first blog of my upcoming blog series based on “JavaScript Behavior Under the Hood” and will on the concept of inheritance which achieved by prototype in JavaScript.

First, we will focus on the prerequisites:

Prerequisites: Assuming, you are aware with JavaScript prototype concept used for inheritance as this blog will major focus on difference between prototype and __proto__. However, we will start by touching prototype concept so a basic awareness is good to have.

First, have a look in following JavaScript code:

In my perception, all lines of code are self explained and are producing results as expected.

Now, let’s try to categories our code and introduce some interesting term which will surely help to understand upcoming further things.

  1. Line number 2-5: are simply function definition. Make sure, there is no any constructor concept here.
  2. Line number 7:
    • Term before assignment operator is called as object instance.
    • Term after assignment operator is known as function as constructor because of new keyword.
  3. All other lines of code are self explained.

Note 1: We have got our first point here please note that before going further: “prototype is property of constructor function while __proto__ is the property of object instance”. Both the term we have touched in above points.

Let’s do some other interesting thing with the code as we all are developers so we get more clear with coding language. isn’t it? πŸ™‚

Let’s observe above code line by line:

  1. Line number 2: make sense as we already know that __proto__ is the property of object instance and here obj1 in an object instance.
  2. Line number 4: this make sense as well because of same point i.e. prototype is property of constructor function not the object instance. Here, obj1 is object instance not the function constructor.
  3. Line number 6: also make sense as here MyFun is a constructor function and prototype is a property of constructor function.
  4. Now, line number 8: I know things are running in your mind and you might want to say that “Hey! are we conflicting with our point?”, “How can constructor function read __proto__ if it not property of constructor function?”. Dear reader, I am still stand with my point, please calm down and try to read my next note which is mention at below.

Note 2: Any function created in JavaScript whatever it is either constructor or simple function or with function expression, will always be an object instance of Function() constructor. Note that Function with capital ‘F’, is totally different that function with ‘f’. First one is constructor and called when we defines any function and second one is just a keyword which just use for syntactic sugar. I think you have got my point here, Myfun is a constructor and there is no doubt about this but it is also an object instance of Function() constructor which always calls under the hood in JavaScript. Now happy? πŸ™‚ πŸ™‚

To get more about Function() read my blog on More on Function().

Let’s do some funny stuffs with coding skills and try to add some property in our prototype using both concept and try to get difference:

By seeing above code if you are thinking that prototype and __proto__ are behaving same then yes! you got the point little bit. Both are the same but its only a way of representation which make them differ. Generally we avoid adding property using __proto__ because It make lesser sense to add property from any single instance and will be available for other instances as well (Read note 3 for more).

Its time to write a note here:

Note3: All the properties we have added either by using __proto__ with object instance or by using prototype with function constructor will be available in MyFun.prototype and we can access all of them with any object instance of that constructor function. If we are modifying any prototype property using any instance variable then that property will be modify for all the object instance of that constructor function. Here comes the concept of memory utilization, it means prototype properties are created at only one place of memory and will be available for all the instances. They will not create memory for every instance. Got it? πŸ™‚

Let’s understand above point with code skills:

Results are same as we have discussed in our previous note.

Yes! you have finished it. It’s time to be enjoy.

I would like to suggest you please keep some more practice as “Practice make the things permanent”. Please comment if you have any doubts. Also gives your feedback if you really enjoyed it.

Hope to see you soon, until thenΒ Happy Learning πŸ™‚ πŸ™‚ πŸ™‚ ……………………………………