jQuery unveiled: the extend() method

The jQuery's extend() method provides a useful way to extend a base object provided as argument:

jQuery.extend = jQuery.fn.extend = function() {
 // copy reference to target object
 var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;

 // Handle a deep copy situation
 if ( typeof target === "boolean" ) {
  deep = target;
  target = arguments[1] || {};
  // skip the boolean and the target
  i = 2;
 }

 // Handle case when target is a string or something (possible in deep copy)
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
  target = {};
 }

 // extend jQuery itself if only one argument is passed
 if ( length === i ) {
  target = this;
  --i;
 }

 for ( ; i < length; i++ ) {
  // Only deal with non-null/undefined values
  if ( (options = arguments[ i ]) != null ) {
   // Extend the base object
   for ( name in options ) {
    src = target[ name ];
    copy = options[ name ];

    // Prevent never-ending loop
    if ( target === copy ) {
     continue;
    }

    // Recurse if we're merging object literal values or arrays
    if ( deep && copy && ( jQuery.isPlainObject(copy) || jQuery.isArray(copy) ) ) {
     var clone = src && ( jQuery.isPlainObject(src) || jQuery.isArray(src) ) ? src
      : jQuery.isArray(copy) ? [] : {};

     // Never move original objects, clone them
     target[ name ] = jQuery.extend( deep, clone, copy );

    // Don't bring in undefined values
    } else if ( copy !== undefined ) {
     target[ name ] = copy;
    }
   }
  }
 }

 // Return the modified object
 return target;
};
  1. jQuery copies a reference to the target object and initializes some base variables for later use
  2. handles the situation where the target object is not actually an object but a boolean or a string; if the target is a boolean, it's skipped completely; if the target is a string, an empty object literal is considered as the target
  3. if only one argument is passed to the method, jQuery uses itself as an argument by binding the target variable to this
  4. jQuery checks if the values passed in are valid values, that is, if they aren't null or undefined
  5. extends the base object provided as argument with the options and name variables using a square-bracket notation
  6. performs a recursive iteration to handle object object literals and arrays
  7. avoids to override original objects; instead, it clones them
  8. skip undefined values
  9. returns the extended object (target).

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.