Mastering JavaScript’s this: Common Pitfalls and How to Fix Them

Understanding the binding of this in JavaScript

Because this is determined by how a function is called, it is easy to get unexpected results. The following examples illustrate common situations and how to keep this pointing to the intended object.

(1) Inline event handlers

When an <a> element uses a normal onclick attribute, this refers to the element itself, so the alert shows A. Using a javascript: URL creates a global execution context; this then points to window and the alert shows undefined. Defining a global variable and referencing it demonstrates the effect.

<a href="#" onclick="alert(this.tagName)">click me</a>
<a href="JavaScript:alert(this.tagName)">click me2</a>

(2) setTimeout and setInterval

Passing a method directly to setTimeout or setInterval loses the original object context, so this defaults to window.

var name = "global";
var duang = {
  name: "local",
  hi: function() { alert("I am " + this.name); }
};

duang.hi(); // I am local
setTimeout(duang.hi, 1000); // I am global
setInterval(duang.hi, 1000); // I am global

(3) DOM element event handlers

Assigning duang.hi directly to btn.onclick makes this refer to the button element, so the alert shows the button’s name attribute. Wrapping the call in an anonymous function preserves the original object binding.

var btn = document.getElementById("btn");
var duang = {
  name: "duang",
  hi: function() { alert("I'm " + this.name); }
};

// Direct assignment – this points to the button
btn.onclick = duang.hi; // alerts "button"

// Fixed with anonymous wrapper
btn.onclick = function () { duang.hi(); };

(4) call and apply

Even when using call or apply inside an anonymous handler, if the method is invoked without specifying a context, this still points to window, so the alert shows the global name.

var name = "global";
var duang = {
  name: "duang",
  hi: function() { alert("I'm " + this.name); }
};

btn.onclick = function () {
  duang.hi.call(); // this -> window, alerts "I'm global"
};

In all these cases, using an anonymous wrapper or explicitly binding the desired object prevents unexpected this binding and makes the code behave as intended.