What is ‘this’ in JavaScript?

What is ‘this’ in JavaScript?


JavaScript is a great programming language. That would have been a controversial statement a few years ago, but developers have rediscovered its beauty and elegance. If you dislike JavaScript, it’s probably because:

* You’ve encountered browser API differences or problems  which isn’t really JavaScript’s fault.

* You’re comparing it to a class-based language such as C++, C# or Java and JavaScript doesn’t behave in the way you expect.

One of the most confusing concepts is the ‘this’ keyword. In most languages, ‘this’ is a reference to the current object instantiated by the class. In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.

Global Scope

If there’s no current object, ‘this’ refers to the global object. In a web browser, that’s ‘window’ the top-level object which represents the document, location, history and a few other useful properties and methods.

view plainprint?


1. window.WhoAmI = "I'm the window object";
2. alert(window.WhoAmI);
3. alert(this.WhoAmI); // I'm the window object
4. alert(window === this); // true


window.WhoAmI = "I'm the window object";
alert(window.WhoAmI);
alert(this.WhoAmI); // I'm the window object
alert(window === this); // true


Calling a Function


‘this’ remains the global object if you’re calling a function:
view plainprint?

1. window.WhoAmI = "I'm the window object";
2. function TestThis() {
3. alert(this.WhoAmI); // I'm the window object
4. alert(window === this); // true
5. }
6. TestThis();


window.WhoAmI = "I'm the window object";

function TestThis() {
alert(this.WhoAmI); // I'm the window object
alert(window === this); // true
}

TestThis();

Calling Object Methods


When calling an object constructor or any of its methods, ‘this’ refers to the instance of the object much like any class-based language:

view plainprint?


1. window.WhoAmI = "I'm the window object";
2. function Test() {
3. this.WhoAmI = "I'm the Test object";
4. this.Check1 = function() {
5. alert(this.WhoAmI); // I'm the Test object
6. };
7. }
8. Test.prototype.Check2 = function() {
9. alert(this.WhoAmI); // I'm the Test object
10. };
11. var t = new Test();
12. t.Check1();
13. t.Check2();


window.WhoAmI = "I'm the window object";
function Test() {
this.WhoAmI = "I'm the Test object";
this.Check1 = function() {
alert(this.WhoAmI); // I'm the Test object
};
}

Test.prototype.Check2 = function() {
alert(this.WhoAmI); // I'm the Test object

};
var t = new Test();
t.Check1();
t.Check2();

Using Call or Apply

In essence, call and apply run JavaScript functions as if they were methods of another object. A simple example demonstrates it further:

view plainprint?


1. function SetType(type) {
2. this.WhoAmI = "I'm the "+type+" object";
3. }
4. var newObject = {};
5. SetType.call(newObject, "newObject");
6. alert(newObject.WhoAmI); // I'm the newObject object
7. var new2 = {};
8. SetType.apply(new2, ["new2"]);
9. alert(new2.WhoAmI); // I'm the new2 object


function SetType(type) {
this.WhoAmI = "I'm the "+type+" object";
}
var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // I'm the newObject object
var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // I'm the new2 object


The only difference is that ‘call’ expects a discrete number of parameters while ‘apply’ can be passed an array of parameters.