JSFoo 2013

All about being creative with JavaScript

Up next

Hey! What's this? (Demystifying 'this')


Ashutosh Sharma


This talk will help developers in understanding the ‘this’ keyword which can get quite tricky, especially in event callbacks and setTimeout() or setInterval() handlers.


JavaScript developers can sometimes find themselves with an unexpected value of ‘this’. This talk will discuss common usage patterns that lead to an incorrect context (i.e. an unexpected value of ‘this’), as well as provide recipes to code these patterns the right way.

Proposed outline:

  • ‘this’ in Object methods, getters & setters
  • ‘this’ in Function calls
  • ‘this’ in Extracted object methods
  • ‘this’ in setTimeout, setInterval callbacks
  • ‘this’ in event handlers
    • <span onclick=’hander()’> vs <span onclick=handler> vs element.onclick = handler; vs element.addEventListener(“click”, handler);
  • ‘this’ in jQuery event callbacks
  • ‘this’ in constructors
  • ‘this’ in eval’ed code
  • ‘this’ in Nested functions
  • ‘this’ and Array.prototype.{forEach,map, filter, every, some}, jQuery.each
  • Inheritance and ‘this’
  • Inspecting ‘this’ in the current scope
  • Creating a closure - self, thiz, that
  • Explicitly setting the value of ‘this’
    • call, apply
    • bind

Speaker bio

I’m a Senior Computer Scientist at Adobe (Noida office). My work involves exploring web technologies and building prototypes of web development tools. My full-time job requires me to work with JavaScript, HTML and CSS.

I’ve spoken at the following conferences: