Decoding jQuery – jQuery.extend: Objects Inherit from Objects

In the Decoding jQuery series, we will break down every single method in jQuery, to study the beauty of the framework, as an appreciation to the collective/creative geniuses behind it.

jQuery.extend()
When objects inherits from objects, there are two methods, one is shallow copy and the other is deep copy. In shallow copy, if you modify an object in the copy, you also modify the original. In deep copy, modify the new object doesn’t affect the original one. Here is an example of shallow and deep copy:

var artist = {
    name: 'Serge Gainsbourg',
    tags: ['french', 'chanson francaise', 'chanson'],
    similar: {
        name: 'Jane Birkin'
    }
};
var myShallow = {};
$.extend(myShallow, artist);
myShallow.tags.push('pop');
console.log(myShallow.tags);
console.log(artist.tags);

var myDeep = {};
$.extend(true, myDeep, artist);
myDeep.tags.push('french pop');
console.log(myDeep.tags);
console.log(artist.tags);

You will get the following results:

["french", "chanson francaise", "chanson", "pop"]
extend.html:46["french", "chanson francaise", "chanson", "pop"]
extend.html:51["french", "chanson francaise", "chanson", "pop", "french pop"]
extend.html:52["french", "chanson francaise", "chanson", "pop"]

In the jQuery source, you could see the script has a variable deep to check if it should use shallow or deep copy, in case of shallow copy, it loops through the properties copy them one by one.

If deep copy is true, it also loops through the properties copy them one by one, but when it encounters a property that points to an object (array), it doesn’t move the original objects, instead, clone them.

if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
    if (copyIsArray) {
        copyIsArray = false;
        clone = src && jQuery.isArray(src) ? src : [];

    } else {
        clone = src && jQuery.isPlainObject(src) ? src : {};
    }

    // 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;
}

References:
jQuery source: https://github.com/jquery/jquery/blob/master/src/core.js#L304
$.extend method usage: http://api.jquery.com/jQuery.extend/
Concept of deep copy in JavaScript: http://javascript.about.com/od/objectorientedjavascript/a/oop17.htm

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in JavaScript and tagged , . Bookmark the permalink.

One Response to Decoding jQuery – jQuery.extend: Objects Inherit from Objects

  1. Andre Dublin says:

    Hi, these are some great articles you have here. I’m new when it comes to OOP with javascript/jquery, so I have a question.

    1: copyIsArray is set to false, is this a way to reset/unset/dump that variable?
    2: this is just a reiteration to see if I’m following this script. (I went to the jquery source on github to get the full view of this script).

    Target is equal to our original object. //I might be wrong, I’m seeing an array or object condition on line 297
    Target also accepts a boolean value if a deep copy is set to true then deep = target
    Else target will equal an object

    if only one argument was passed to target extend jQuery itself

    This is where I’ll stop, the rest of the script enumerates through the object and then creates to objects src and clone.

    Keep up the series I’m looking forward to more!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>