This blog post is my notes on "this" in Javascript, which is largely and shamelessly reproduced from Daniel Trebbien's answer in StackOverflow. (Thank you Daniel, you made my day!)
The ECMAScript Standard defines this as a keyword that "evaluates to the value of the ThisBinding of the current execution context".
And, ThisBinding is something that the JavaScript interpreter maintains as it evaluates JavaScript code, like a special CPU register which holds a reference to an object. The interpreter updates the ThisBinding whenever establishing an execution context in one of following cases:
1. Global execution context
When evaluating code in the initial global execution context, ThisBinding is set to the global object, window.
Try out the following line of code in your browser console as exercise:
alert(this); //Global execution context here is window object
alert(this === window); //alerts "true"
2. eval code
When entering eval code, ThisBinding is left unchanged; it is the same value as the ThisBinding of the calling execution context
Try out the following line of code in your browser console as exercise:
eval("alert(this)"); //Calling execution context here is window
3. Function context
If a function is called on an object, such as in obj.myMethod() then ThisBinding is set to the object - obj.
In most other cases, ThisBinding is set to the global object. And these most other cases are eight ECMAScript-5 built-in functions that allow ThisBinding to be specified in the arguments list. These special functions take a so-called thisArg or callbackfn which becomes the ThisBinding when calling the function. And these built-in functions are:
Function.prototype.apply( thisArg, argArray )
Function.prototype.call( thisArg [ , arg1 [ , arg2, ... ] ] )
Function.prototype.bind( thisArg [ , arg1 [ , arg2, ... ] ] )
Array.prototype.every( callbackfn [ , thisArg ] )
Array.prototype.some( callbackfn [ , thisArg ] )
Array.prototype.forEach( callbackfn [ , thisArg ] )
Array.prototype.map( callbackfn [ , thisArg ] )
Array.prototype.filter( callbackfn [ , thisArg ] )
In the case of the Function.prototype functions, they are called on a function object, but rather than setting ThisBinding to the function object, ThisBinding is set to the thisArg.
In the case of the Array.prototype functions, the given callbackfn is called in an execution context where ThisBinding is set to thisArg if supplied; otherwise, to the global object.
Try out the following line of code in your browser console as exercise:
var f2 = function() {
console.log(this);
};
f2(); //alert outputs Window {..}
var obj1 = {};
obj1.f2 = f2;
//When a function is called as a method of an object,
//its 'this' is set to the object the method is called on.
obj1.f2(); //alert outputs Object {f2: function ..}
f2.call(obj1); //alert outputs Object {f2: function ..}
var f = function() { return this.prop; };
console.log(f()); //logs "undefined" if there is no prop defined in the window object
var obj1 = {prop: "karthik", func: f}
console.log(obj1.func()); //logs karthik
obj1.subj = {prop: "Sirasanagandla", func: f};
console.log(obj1.subj.func()); //the most immediate reference matters and so logs Sirasanagandla
4. Constructor context
When a function is used as a constructor with the new keyword, its this is bound to new object being constructed.
5. Inline event handler context
'this' inside of an inline event handler function, references the DOM element, the event handler is attached to.
Try out the following line of code in your browser console as exercise:
<button onclick="alert(this.tagName.toLowerCase());"> Show this </button>
Source and References:
- Daniel Trebbien answers in the goto forum - StackOverflow (For a deeper and detailed explanation on this subject, I recommend you to look at this answer by Daniel. Large portions of this above is reproduced to the extent of my understanding from his answer. And don't forget to run through the quiz he has put up as part of his answer to validate your understanding of this concept.)
- MDN