Mastering JavaScript’s ‘this’: Common Pitfalls and Clear Examples

The this keyword in JavaScript often confuses developers because it refers to the owner of the current execution context.

Fundamental Meaning

this represents the object that currently owns the executing code.

Example 1 – Global Context

var x = 1;
function test() {
    alert(this.x);
}
test();

When test is defined in the global scope, it becomes a global function. Therefore, this points to the global object, and this.x accesses the global variable x, resulting in an alert of 1.

Example 2 – Method Assigned to an Object

var x = 2;
function test() {
    alert(this.x);
}
var obj = {};
obj.x = 1;
obj.func = test;

obj.func();

Here the function test is assigned as a method of obj. When obj.func() is invoked, this refers to obj, so this.x yields 1, the value stored in obj.x.

Example 3 – Event Handler without a Defined Property

function test() {
    alert(this.title);
}
<input type="button" value="test" onclick="test()" title="i am button"/>

The onclick="test()" attribute creates a global function call. The function runs in the global context, where no title property exists, so this.title is undefined. The underlying mechanism is equivalent to a global onclick handler that simply calls test().

These examples illustrate how this can refer to the global object, a specific object, or be undefined depending on how a function is invoked.