What this is depends on how you call the function in which you use this.
1. call as a function
functionName();
In this case this will always refer to the global object (most often the window object).
Example
a = 2;
function XY(a) {
this.a = a;
this.b = function () {
func();
};
function func () {
console.log(this.a);
}
}
var xy = new XY(1);
xy.b(); //2
Remarks
- The example is a little bit constructed, but note, that the function
func is called by simply write func();. So even if your function is places inside a constructor function (XY) and called from a function that is called as a method (see point 3), this still refers to the global object.
2. call with new keyword
var obj = new functionName();
In this case this will refer to the new created object.
Example
a = 2;
function XY(a) {
this.a = a;
}
var xy = new XY(1);
console.log(xy.a); //1
3. call as a method
obj.functionName();
In this case this will refer to the object that contains the function you are calling.
Example
a = 2;
var xy = {
a: 1,
func: function() {
console.log(this.a);
}
}
xy.func(); //1
4. call by using apply
functionName.apply(thisObj, argArray);
In this case this will be new Object(thisObj), with thisObj being the first argument of the function apply.
Example
function xy (a,b) {
console.log(this);
}
xy.apply({f:3}, [1,2]); //Object {f: 3}
xy.apply("hello", [1,2]); //String {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
5. call by event handler
As the user Mifeet suggested, events also change the context of this:
Events are kind of a separate topic. They are not part of EcmaScript and are generally handled by different browsers differently. Nevertheless, the differences concerning this are minor and for IE > 8 as far as I know nonexistent.
this will refer to the DOM element that fired the event, except when you use inline event handler. In that case this will refer to the global object.
Example
<button id="1" onclick="clickit()">click me</button> <!-- 0 -->
<button id="2">click me</button>
<button id="3">click me</button>
<script>
var button1 = document.getElementById("1");
var button2 = document.getElementById("2");
var button3 = document.getElementById("3");
id = "0";
window.clickit = function(){
console.log(this.id);
};
button2.onclick = clickit; //2
button3.addEventListener("click", clickit, false); //3
</script>
Remarks to Events
- Internet Explorer prior to version 9 didn't support
addEventListener but attachEvent. Using this function will also result in this refering to the global object.
this, directly inside the HTML tag, will refer to the DOM element representing that tag. Therefore <button id="1" onclick="clickit(this)">click me</button> will pass the DOM element to the clickit event handler.
back to your case
In your first two cases, you are calling your function as a method and in the last case, you are calling it as a function. That is why in the last case, this refers to the global object.
EDIT
I recently saw a very similar answer to a very similar question here on StackOverflow. Unfortunately I couldn't find it anymore, so I decided to post an answer by myself. But if someone knows what answer I mean, just leave a comment and I'll be happy to put a link to the original answer in my answer.
