Introduction to the difference between jQuery.fn and jQuery.prototype_jquery

I've been reading the source code of jQuery recently.

I find something difficult to understand here.

What do jQuery, jQuery.fn, jQuery,fn,init, jQuery,prototype here stand for.

Let’s take a look at how jQuery’s source code is defined:

Copy the code The code is as follows:

(function( window, undefined ) {

var jQuery = (function() {
// Construct jQuery object
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

// jQuery object prototype
jQuery.fn = jQuery.prototype = {
constructor: jQuery ,
init: function( selector, context, rootjQuery ) {
// something to do
}
};

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

// Merge content into the first parameter, most subsequent functions are extended through this function
// Through jQuery.fn Most of the functions extended by .extend will call the function of the same name extended by jQuery.extend
jQuery.extend = jQuery.fn.extend = function() {};

// Expand static on jQuery Method
jQuery.extend({
// something to do
});

// At this point, the jQuery object construction is completed, and the following code is for jQuery or jQuery objects Extension
return jQuery;

})();

window.jQuery = window.$ = jQuery;
})(window); 🎜>Here we can see:

Copy code The code is as follows: var jQuery = function ( selector, context ) {

return new jQuery.fn.init( selector, context, rootjQuery );

}


jQuery In fact, jQuery.fn.init() returns an object. So what does jquery.fn.init() return?

Copy code The code is as follows: jQuery.fn = jQuery.prototype = {

constructor: jQuery,

init: function( selector, context, rootjQuery ) {
// something to do
}
};


comes from here, A javascript object.

There is a problem here.

Copy code The code is as follows: jQuery.fn = jQuery.prototype

Then the prototype object of jQuery is assigned to jQuery.fn.

Look below:

Copy the code The code is as follows: jQuery. fn.init.prototype = jQuery.fn;

I have an idea when I see this. Just give jQuery.fn to jQuery.fn.init.prototype.

So what was jQuery.fn.init.prototype. before this?

Isn’t it? At this time, its prototype is {};

so that you can call methods outside init. Just did a process.

Assign jQuery.fn to jQuery.fn.init.prototype. In this case, the prototype of

jQuery.fn.init.prototype, that is, the prototype object of jQuery is jQuery.fn (Note jQuery = function(return new jQuery.fn.init())).

After assigning value. When calling, when there is no method in init, it will be called in the prototype function.

In that case.

You may think of something like this:

Copy the code The code is as follows: jQuery.extends()

jQuery.fn.extends()

I think you should understand the difference between them.

jQuery.extends() directly extends jQuery. And jQuery.fn.extends() is obviously the extended prototype.

This is why most of the methods in jQuery.fn.extends() come from jQuery.extends().

Here jQuery.fn is assigned to jQuery.fn.init.prototype.

Then there is such a relationship:

Copy code The code is as follows: jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype