Understanding JS Scoping of “this” – a simple jQuery example

February 11, 2013 11:34 am 1 Comment

One of the more common mistakes that web developers made is the scoping of “this”. This would be one of the criteria of understanding that most testers would look at when hiring new developers. This short post will show a simple code snippet showing how to keep the scoping of “this” can be maintained when writing codes in simple closure. I will first present the wrong code and then followed by the correct one.

This is a quick and dirty example. Our objectives are:

  1. Create a javascript class that will capture an input box’s value onChange.
  2. Assign a click event to a button to alert/print out the box’s value
  3. We’ll assume jQuery has been loaded

Our HTML (easy peasy)

 The WRONG Javascript

When we execute the above javascript, no matter what you put in the input box, the alert will always say “Hi All”. This is because “this” has changed scope within the jQuery event handler portion, the .change(). In order to rectify that we have to save the current reference to the object to another variable. I like to keep it simple and call it “self”. 

So let’s have a look at our correction:

The Correct Code

So by simply saving our reference to the object above into self, we not have a working code at minimal for our intention.

This kind of thing is simple, yet easy to forgot. It’s important to understand scoping and closure especially when we are working on bigger javascript projets such as EmberJS.

You can view my example on JS Fiddle:

If you are interested on learning more about lexical scoping, visit this wikipedia page about it.

Stay tuned for more JS examples and Ember Step by Step tutorial. I’m planning to write one on creating a simple shopping list using jQuery + EmberJS + CodeIgniter!

Tags: , , , , ,

Categorised in: , ,