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.
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:
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:
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:
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.
That’s ‘this’ in a nutshell! However, there are several gotchas which may catch you out. We’ll discuss those in my next post…
