JSFoo 2013

All about being creative with JavaScript

Ashutosh Sharma


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

Submitted Aug 2, 2013

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:


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more