This in Javascript
Here after a lot of learning I would like to explain how this in JavaScript behaves through my own examples
Hello My Name is Goutham and Iam an Undergraduate from India this is my 4th article in 4 articles in 4 weeks contest by Hashnode.
I am super excited to share about the confusing part in JavaScript which is thisobject.
If you know Java script then I want to ask some questions on how this behaves so, without looking at my solution share how many you got correct.
This article will simply brush up your this keyword concept in JavaScript
I start with moderate first and then to some easy ones.
As because I think that most of you are familiar with JavaScript
Lets Begin
1. What is the output
Find where this points , in both type of functions
Answer :
this is traditional function points to obj object but this in arrow function points to window global object because this in traditional function depends on how the function was called (run time binding) but this in arrow function is based on the scope of the arrow function.
If you find my explaination not so perfect no problem ,continue you will be finding as you go .
So , I just modify the code and try to find the output
2. What is the Output
This question is most popular and asked in many interviews
Answer
this in line :9 depends on obj object but this in line :12 depends on window object
If you understood my above example there I said this in traditional function depends on how the function was called ,function was called wrt to obj object and so depends on obj but This function has been called normally so this inside This function depends on window object;
So, lets move to next example
3.What is the output
Answer
this in line :10 depends on obj object this in line :13 also depends on obj object
This example is also the modification of the 1st example I think by now you could be able to find the reason for line :10 ,so in line:13 as I explained you in the 1st example this in the arrow function depends on scope of the arrow function ,scope of the arrow function here is in obj object so this depends on obj object.
There in the 1st example arrow function can be accessed from outside and here it cannot be accessed from outside
So, lets dive deeply to some more examples.
4. What is the Output
Answer
Undefined
this in the arrow function there depends on the global object but in the global scope we don't have name defined ,let is block scoped so memory for name="Korla" will be allocated in local scope so in the global scope we don't have memory for name so undefined will be printed.
If we declare name as var name="Korla" then Korla would have printed
5. Can You Solve the problem
Can you use the get info function for both obj1 and obj2?
Answer
I think most of you found the answer, my approach is to use call ,apply,bind to solve this problem.
getinfo.call(obj1); getinfo.call(obj2);
So that's it Thanks for reading my article.Please tell me how many you got correct .
If you find my article interesting then Please Like ❤
If you learned some thing then I feel that I am a good at teaching🎉