JSFoo 2013

All about being creative with JavaScript

Ashutosh Sharma

@toshsharma

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.

Outline

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:

Links

Comments

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

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

{{ errorMsg }}

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