jQuery: $.extend() and $.fn.extend() confusion

There is a significant difference between using .extend() with one argument and doing it with two or more:

When .extend() receives a single object, it adds the methods defined in it to either the jQuery or the jQuery.fn (also called jQuery.prototype and $.fn) objects.

As a general rule, you should extend the jQuery object for functions and the jQuery.fn object for methods. A function, as opposed to a method, is not accessed directly from the DOM.

Notice the different way of calling a method when extending the jQuery.fn or jQuery objects. The receiver (what’s to left of the period) changes.

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

When .extend() receives two or more objects, it takes the first object and adds to it the methods and variables defined in the other objects. See an example:

defaults = { size: 3 };
options = { height: 6 };
var opts = $.extend(defaults, options)
// 'defaults' receives the methods and variables defined in 'options'
// opts == defaults == { size: 3, height: 6 }
// options == { height: 6 };

If the first object is empty, it will add the methods and variables in a new object. This is useful when we want to group the methods defined in several objects without modifying any of them:

<pre>var opts = $.extend( {}, defaults, options)
// 'opts' gets all methods and variables defined in 'defaults' and 'options',
// neither of them get modified.
// opts == { size: 3, height: 6 }
// defaults == { size: 3 };
// options == { height: 6 };
About these ads

34 responses to “jQuery: $.extend() and $.fn.extend() confusion

  1. Excellent post!!
    I had too much confusion while using extend and after reading this its very clear.
    Thanks a lot!!

  2. Pingback: recursive object merge with $.extend() « MENINMAC

  3. Excelent Explication!!!
    It takes my doubts!
    Thanks.

  4. Adding my thanks to you about this confusing topic!

  5. Thanks so much for your article. I found your explanation and snapshots helpful.

  6. Thanks for the explanation.. so $.extend({method:function(){}) is similar to a static method with no instance required and therefore not chainable.
    While $.fn.extend(method:function(){return this…}) is similar to an instance method with an implied instance that is chainable due to the return this.

  7. Julian Johannesen

    Thanks so much. This was very helpful.

  8. Good topic & clear views. Thanks for sharing!

  9. Code blocks are presented very nicely.
    How can I enable these in my blog?

  10. Thanks you.. really help me a lot..

  11. Debugging in firebug after the page is completely loaded you can check in console:
    jQuery.extend === jQuery.fn.extend
    is “true”

  12. What you refer to (as “A function, as opposed to a method”) seems to be a ala Java/OOP.

  13. What you refer to as “A function, as opposed to a method” seems to be a “static method” ala Java/OOP.
    (repost to fix dropped words… need a preview post)

  14. Thank a lot, solved my confusion…

  15. Thank you. That was excellent!

  16. I found it very helpful. Thanks for sharing.

  17. Thank You!

  18. Good explanation. Now need some practice. Thanks.

  19. I think line 9 of your first code sample contains a typo, should be: jQuery.myMethod2();

    Helpful info though, thanks.

  20. Use the extend function to add a new function to a jQuery object.

    $.extend({
    any: function(elems, callback) {
    return $.grep(elems, callback).length > 0;
    }
    });

    EX:
    $.any([1, 2, 3], function(n) { return n 0 }) == true

    ——————————————————————————
    Use the fn.extend function to add a new function that will be applied to each element in the set of elements in a jQuery object.

    $.fn.extend({
    setBackgroundColor: function(value) {
    $(this).css(“background-color”, value);
    }
    });

    $(“p”).setBackgroundColor(“blue”);

  21. Use the extend function to add a new function to a jQuery object.

    $.extend({
    any: function(elems, callback) {
    return $.grep(elems, callback).length > 0;
    }
    });

    $.any([1, 2, 3], function(n) { return n 0 }) == true

    Use the fn.extend function to add a new function that will be applied to each element in the set of elements in a jQuery object.

    view plaincopy to clipboardprint?
    $.fn.extend({
    setBackgroundColor: function(value) {
    $(this).css(“background-color”, value);
    }
    });

    $(“p”).setBackgroundColor(“blue”);

    Reference: http://joechung.posterous.com/jquery-extend-and-fnextend

  22. Use the extend function to add a new function to a jQuery object.

    $.extend({
    any: function(elems, callback) {
    return $.grep(elems, callback).length > 0;
    }
    });

    $.any([1, 2, 3], function(n) { return n 0 }) == true

    Use the fn.extend function to add a new function that will be applied to each element in the set of elements in a jQuery object.

    $.fn.extend({
    setBackgroundColor: function(value) {
    $(this).css(“background-color”, value);
    }
    });

    $(“p”).setBackgroundColor(“blue”);

    Reference: http://joechung.posterous.com/jquery-extend-and-fnextend

  23. cool post, thanks! got rid of a lot of confusion around this topic…

  24. Pingback: 跟我一起学JQuery插件开发 | 编程X资讯

  25. Pingback: jQuery: $.extend() and $.fn.extend() 不同点 | 云淡然

  26. Pingback: 跟我一起学JQuery插件开发 | 迷恋CSS

  27. Pingback: Best Way to Extend a jQuery Plugin | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  28. Only another way to do extend jQuery methods to deal with DOM:

    $.fn.doSomething = function() {
    // retrieving the DOM object wrapped with jQuery
    var el = $(this[0]);
    });

    As fn is an alias for jQuery’s prototype.

  29. Braian Iván Monnier

    Excellent explanation… Just one typo: on first code example, last line should be “//jQuery.myMethod2();”, instead of “//jQuery.myMethod();”, the number 2 is missing. This really helped me to overcome my doubts. Thanks very much!

  30. Thank you for your excellent explanation. It was very helpful. I did Korean translation of your document on my blog! Of course I left a source and hyper link to this document.

  31. thank you sir it really helpful for me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s