What? Context? Now where did that come into the picture?
Well, if i were to define the context, I'd say that its nothing but the value of the 'this' in the function that is being executed. Seems pretty simple eh?
'this' is something that you must know! < insert wicked laughter here >
Also, when defining objects that are not members of other objects, the objects are considered to be members of the default object - the window object.
Well, the above two lines are pretty simple. But lets see how these simple little things can make the behavior of code unpredictable when programming if you are not careful with your code.
Lets assume we have the following function defined in our script
alert("fun4 "+ this);
alert("fun5" + this);
What I have done here is pretty simple. I created an object 'v' with a property 'a' and a function fun4(). fun4() alerts a message and then calls fun5(). Run this code and see what happens. As you see, the first alert indicates that the value of the 'this' keyword in the function fun4 is the object(in our case it is 'v'. You can check it by printing the value of v.a). But the second alert indicates that the value of 'this' is not the object v, but instead it is the default window object.
As you see, during the declaration of the function fun5(), it is not declared as a function of any object. Hence, this function is implicitly a function of the window object. Functions declared on the window object are global and can be called by any other function, which is exactly what our fun4() does. Hence, the default context of the function fun5() is the window object, which is the value of our 'this' keyword.
But what if you want the value of 'this' to be the object 'v' in fun5? What do you do?
Well, if you are thinking that you can simply replace the line fun5() with this.fun5(), that, my friend, is simply not gonna work. That's because, the function fun5() is not a function of the 'this' object in fun4().
In the following piece of code, we are going to declare 2 more functions on our object 'v'. And 2 global functions on the window object.
v.fun6() invokes global function fun7() using the call() function.
v.fun8() invokes global function fun9() using the apply() function.
alert("fun6 "+ this);
alert("fun7" + this + " arg : "+ arg);
alert("fun8 "+ this);
alert("fun9" + this + " arg : "+ arg);
As it can be seen, the global functions also receive a parameter. The syntax of call() and apply() are quite similar. The first argument of both these functions is used as the context in which the actual function is to be called.
The call() method can have many arguments after the first argument such that each argument becomes the argument to be passed to the actual function.
The second argument of the apply() function takes an array of values that are to be passed as arguments to the actual function.
Run the code and see for yourself, how the value of the 'this' keyword is now appropriately being used in the global functions.
One implication of this sort of technique is that you can have a number of global functions, each of which does a single common task. And you can have several objects, belonging to different classes that call these global function using their own context, thereby reducing the redundancy of existing functionality.
That's all for now. We shall do some more experiments in the next post. :>
Happy Programming :)