by Ashutosh Sharma (@toshsharma) on Friday, 2 August 2013

-2
Vote on this proposal
Status: Submitted
Section
Full talk

Technical level
Intermediate

Objective

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

Description

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:

Comments

  • 2
    [-] Saurabh S Shah (@newsaurabhshah) 3 years ago

    It's a under rated concept. Very tricky. Would love to have a discussion. Please share more details.

    • 1
      [-] Ashutosh Sharma (@toshsharma) 3 years ago (edited 3 years ago)

      Hi Saurabh,

      Here's a proposed outline for the talk:

      • '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

      I've also updated the description above.

Login with Twitter or Google to leave a comment