Scope or visibility of the this pointer which is called w.r.t a div is restricted to the function to which it was intended to and not to its NESTED functions.
But,all the local variables of that function are visible in the nested functions -- why does this happen??.. getting the this pointer via calling the function with <function name>(this) on a div -- doesnt this mean even the this pointed also is a local variable in the <function name>
In short, here's the code which confused me..
<html>
<script type="text/javascript" >
function tst1(){
setTimeout(
function (){
alert(this.id)
}, 2000)
}
function tst2(){
var elem = this
setTimeout(
function (){
alert(elem.id)
}, 2000)
}
</script>
<style type="text/css">
.test{
margin: 40px 100px;
background-color: green;
width: 200px;
line-height: 40px;
text-align: center;
height: 40px;
}
</style>
<div id="fooBar" class="test" onclick="tst1.call(this)"> Emily Rossum</div>
<div id="chickenRun" class="test" onclick="tst2.call(this)"> Emily Rossum</div>
</html>
In the tst1 function the this variable is null but the local variable of that function should be visible in the nested functions as shown in tst2 .
I was reading on closures, since the function is being called later -- via setTimeout even after the tst1 and tst2 are returned -- aren't both the functions closures? (If so,this being a variable in the parent function should be visible in the nested function, shouldn't it?)
The this variable in javascript is different from other variables in that it's always specific to the particular function invocation. There is essentially one this for every function invocation and it's not necessarily, although it may be, the same this which was used to in the outer function.
ReplyDeleteIf you want to preserve the outer this for use within the inner functions then save it to a local.
var outer = function () {
var self = this; // Save current 'this' in a local
var inner = function () {
self.name; // refers to the original outer 'this.name'
...
};
...
};