JSFoo 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:

• World Wide Web 2012: Better Web Development with WebKit Remote Debugging
• HTML5 Developer Conference 2013: Pro JavaScript Debugging
• JSDay 2013: Modern JavaScript Debugging

Links

• My blog: http://deceptiveweb.com/blog/
• Bio: http://deceptiveweb.com/blog/about/
• Twitter: https://twitter.com/zorder/