Mar 30, 2017
Welcome to Javascript and “this” keyword
This is a part four of a series of blog where I am planning to capture on how we provide technical apprenticeship to new college graduates that intern with us. Here is Part 1, Part 2, Part 3
Once we have the basic Git and our guiding principles in place, we start with actual programming. First step, install nvm and node from here.
As mentioned before, we try to use as much open source as we can. We again turn to node school and solve these
One of the thing that we needed more depth was on this keyword. So here are some of the examples we used to learn more about it. All the examples here would be written in strict mode
This one is simple. When in strict mode there is no global context and you get this as undefined. If we remove line 1, we would get a window object if you run this in browser or the global object if you are run this in node.
Lets enhance this example
If you are surprised by seeing {}/window objectas an output, remember that there will always be onethis object whose context is node/window.
Lets look at nested function
We do not expect any change in the value of this as the context of insideFunction is whoAmI function.
What if we actually want to use this inside whoAmI? apply to rescue
With apply, the context is passed and hence we can see the output we see at line 4. What about line 6? This is still just a function invocation and not with any object, so not a method invocation. Hence this is still undefined.
Lets extend this further, and lets say we want to have insideFunction to have access to this object as well. We have two option: Option 1 is to use apply again.
Option 2 is where we add insideFunction to this
Note that in the second scenario, we have eventually added insideFunction to this which means that it is now exposed to outside world and probably defeating the purpose of creating a nested function. I just wanted to show the approach.
Lets start with more complicated examples and move from function invocation to methods invocation.
The output is a testObj because the function whoamI is called on the testObj at line 10. Just to make the above point even more clear, look at the example below
The value of a changes as we are operating on the same object.
Lets add some actual use case scenarios of node where async is more common
If you are surprised by the result that the second log statement does not print the testObj, its because what gets passed to setTimeout is not the testObj but just the function. Later, the function is called with the context in which it is running.
How do we fix this? bind to the rescue.
bind will make sure that this whenever this function is called, its called with the context passed as a parameter.
Lets look at some examples with classes
I am leaving arrow functions for another post.
Are there some important scenarios that you encounter/ stumped you on regular basis? Let me know and I’ll add it.
All the examples are in this github repo.
