jQuery.extend() and jQuery.fn.extend() are the same… Right?

Question

I was examining the query source code when I came across this:

3730     |  jQuery.extend({
3731-3775|      //code
3776     |  });

And then right after that, I found this:

3778| jQuery.fn.extend({
----|    //code
----| })

These two should be the same because back on line 296 where the extend function is declared, I found this:

296| jQuery.extend = jQuery.fn.extend = function() {

But since they are the same, why would the jQuery team suddenly switch from always using jQuery.extend() to suddenly using jQuery.fn.extend()?

$.fn.extend = Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. — adeneo, Jan 18 '14 at 14:48
jQuery.extend = Merge the contents of two or more objects together into the first object. — adeneo, Jan 18 '14 at 14:49
the plugin methods(on, val, $('item').map(), etc) are created using `$.fn.extend` where are static methods($.map, $.each, etc) are created using `$.extend` — Arun P Johny, Jan 18 '14 at 14:49
If they're different, what about the assignment on line 296? — Barmar, Jan 18 '14 at 14:51
I could definitely mark some of these as correct answers if they were answers... — Progo, Jan 18 '14 at 14:51
@Barmar it is operating on the context in which it is called upon... in the case of `$.extend()` `this` inside the extend method refer to the `$` object where as `$.fn.extend` `this` refers to the `$.fn` object where all the plugins are stored so the context of the calls are different — Arun P Johny, Jan 18 '14 at 14:51
@Progo: I just wanted to copy [my answer from there](http://stackoverflow.com/a/14819896/1048572) to here :-) — Bergi, Jan 18 '14 at 15:20

score 3 · Accepted Answer · answered Jan 18 '14 at 14:54

$.extend simply extends an object

var obj1 = {'name' : 'Progo'};
var obj2 = {'value' : 'stack overflow'};

$.extend(obj1, obj2);

// obj1 is now {'name' : 'Progo', 'value' : 'stack overflow'}

FIDDLE

jQuery.fn.extend extends the jQuery prototype

jQuery.fn.extend({
  turn_red: function() {
    return this.each(function() {
      this.style.color = 'red'
    });
  }
});

// gives you

$('elements').turn_red(); // sets color to red

FIDDLE

score 1 · Answer 2 · answered Jan 18 '14 at 14:54

1

The key difference is here:

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

this will be different depending on whether $.extend or $.fn.extend was called.

answered Jan 18 '14 at 14:54

Barmar

741,623
53
500
612

You even could call `$.extend()` with only one argument… – Bergi Jan 18 '14 at 15:21

jQuery.extend() and jQuery.fn.extend() are the same… Right?

2 Answers2