JavaScript_Succinctly

Working around the nested function issue by leveraging the scope
chain
So that the this value does not get lost, you can simply use the scope chain to keep a
reference to this in the parent function. The following sample demonstrates how, using
a variable called that, and leveraging its scope, we can keep better track of function
context.
Sample: sample104.html
var myObject = {
myProperty: 'I can see the light',
myMethod : function(){
var that = this; // Store a reference to this (i.e. myObject) in
myMethod scope.
var helperFunction = function() { // Child function.
// Logs 'I can see the light' via scope chain because that
= this.
console.log(that.myProperty); // Logs 'I can see the
light'.
console.log(this); // Logs window object, if we don't use
"that".
}();
}
}
myObject.myMethod(); // Invoke myMethod.
Controlling the value of this using call() or apply()
The value of this is normally determined from the context in which a function is called
(except when the new keyword is used—more about that in a minute), but you can
overwrite and control the value of this using apply() or call() to define what object
this points to when invoking a function. Using these methods is like saying: "Hey, call
X function but tell the function to use Z object as the value for this." By doing so, the
default way in which JavaScript determines the value of this is overridden.
In the next sample, we create an object and a function. We then invoke the function via
call() so that the value of this inside the function uses myObject as its context. The
statements inside the myFunction function will then populate myObject with properties
instead of populating the head object. We have altered the object to which this (inside
of myFunction) refers.
108