Menu
Basically I am trying to understand and learn the 'this' keyword's working principle in JavaScript.
As far as I understand 'this' refers to the object (function) that it is inside at that moment.
So, by believing this, I wanted to test the output of the simple code below:
<body>
<input type="button" value="Add Age" onclick="Outer()" />
<script type="text/javascript">
function Outer(){
if(typeof this.Father == 'undefined')
{
this.Father = 0;
}
this.Father+=2;
alert(this.Father);
inner();
function inner(){
if(typeof this.Son== 'undefined')
{
this.Son = 0;
};
this.Son++;
alert(this.Son);
alert(this.Father);
};
};
</script>
</body>
And its output confuses me. Because in the inner() function, this.Son outputs the incremented integer value of the Son. But I expect this.Father to fail because inner() does not have a .Father attribute. But instead of throwing an exception it alerts the value of this.Father -Which seems
At this point i have 2 questions in my mind actualy:
Does 'this' keyword refers always to the outer scope's housing even inside the inner functions?
And without having any instances declared 'this' keyword references what in the method? ( I mean without having something lik var myFamily = new Outer() )
Thanks,
burak ozdogan
667
A function defined inside another function is known as an inner function or a nested function.
Definition and Usage The this keyword refers to the current object in a method or constructor. The most common use of the this keyword is to eliminate the confusion between class attributes and parameters with the same name (because a class attribute is shadowed by a method or constructor parameter).
“This” keyword refers to an object that is executing the current piece of code. It references the object that is executing the current function. If the function being referenced is a regular function, “this” references the global object.
In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used: In an object method, this refers to the object. Alone, this refers to the global object.
this is determined by the invocation pattern, that is, how a function object is being called.
There are 4 different kinds of invocation patterns:
method invocation: function are defined as a property of some object, and is called via the object using refinement, that is, ..
a.func(); // this refers to the object, i.e., a.
function invocation: plain function call.
func(); // this is bond to the global object.
constuctor invocation: well, it is a little complicated. Since constructors are used as, well, the consturctor method for the new function objects being new, this refers to the new function object being created.
var func = new Func(); // this refers to func while in Func constructor)
apply invocation:
func.apply(thisArg, argArray); // this is bond to the first argument
In another words, the this in your example all refers to the global object (your onClick call Other()). You should try using new Other() instead.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
