From ThinkyWiki

Revision as of 08:12, 27 November 2010 by (Talk)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search

jQuery is Awesome

jQuery and this

Iterators like $.each() use this internally to indicate the DOM object being iterated, while in other places – such as within jQuery extensions of the form $.fn.myfunctionthis will indicate a jQuery object. Knowing which and when is important in general jQuery coding, but some design patterns have been developed to provide a more appropriate value for this and to give functions access to the object that is implementing the handler, iterator, etc.

As mentioned, jQuery can be extended by using something like the code below (http://remysharp.com/2007/04/12/jquerys-this-demystified). This example shows how the meaning of this changes within function parameters, as opposed to outside of them, where they have the usual Javascript context. Guidelines suggest never calling jQuery functions outside of Object definitions, so this is never just the document.

jQuery.fn.newTarget = function() {
  // 'this' is a jQuery object at this point - with all the jQuery functions 

  return this.each(function() { // return so we don't break the chain
    // now we are inside of a jQuery function, the DOM element is the context
    // so 'this' has changed to become a DOM element.

    if (this.host != window.location.host) {
      $(this).attr('target', '_new');

Look closely at the example below and you'll discover one of those weird Javascript quirks that breaks conceptual semantics but makes novel design patterns possible. The object definition in this sample doubles as a function definition:

var customClass = function() {
     var self = this;
     this.doJquery = function() {
         $("element").click(function() {
              self.foo = bar;
              x = self.foo;
              self.domore('more done');

     this.domore = function(msg) {
var customObject = new customClass();

What is going on? First off, customClass is simply a global 'anonymous' function, but that doesn't hinder anything because functions are also objects. So creating a function reference creates a global 'anonymous' object reference. This function object actually extends itself to become the object, but calling the This goes for a lot of things in Javascript. The use of new here is interesting. That this should produce a new customClass object makes sense, since customClass is actually the function. But this also calls the function, ignoring the return value. If new was left out it might choke, because the customClass function doesn't return anything. The variable self is known to all methods within, including jQuery methods due to scoping without being global.

Why does this call the function? It's another quirk of Javascript. Check this out:

var customObject = new function() {
     var self = this;
     . . .
customObject.hanky = true;

This is a little sinister. The function body really just provides scope for its functions. Everything within knows self and can access the functions within. The function can return something else if it wants to. It can return an anonymous object containing methods and properties it wants to be public. This is very tricky. The object it returns can access self all it likes to. Functions within can access private vars via self and public vars directly. Note that private functions would not see public vars exposed this way. But for that there are other tricks.

See http://www.klauskomenda.com/code/javascript-programming-patterns

Personal tools