Introduction to jQuery. Fn and jQuery. Prototype

Recently read the source code of jQuery.

There's something here that's hard to understand.

JQuery, jquery.fn,jQuery, fn,init,jQuery,prototype.

Let's see how the source code of jQuery is defined:

 
(function( window, undefined ) { 

var jQuery = (function() { 
//Building jQuery objects
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 the contents into the first parameter, which extends most of the subsequent functionality
//Most of the functions that are called by the jquery.fn.extend extension will call the function of the same name that is called by the jquery.extend extension
jQuery.extend = jQuery.fn.extend = function() {}; 

//Extend static methods on jQuery
jQuery.extend({ 
// something to do 
}); 

//At this point, the jQuery object is constructed, and the rest of the code is an extension to jQuery or jQuery objects
return jQuery; 

})(); 

window.jQuery = window.$ = jQuery; 
})(window); 

Here we can see:

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

JQuery actually returns an object, jquery.fn.init (). So what does jquery.fn.init() return?

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

That's where it comes from, a javascript object.

Here's the problem.

 
jQuery.fn = jQuery.prototype 

So the prototype object of jQuery is assigned to jquery.fn.

Here it is:

 
jQuery.fn.init.prototype = jQuery.fn; 

I have an idea here. Is to jQuery. Fn to jQuery. Fn. Init. Prototype.

So before this jQuery. Fn. Init. Prototype. What is it?

No? In this case, the prototype is {};

So in order to call a method outside of init. I just did a treatment.

The jQuery. Fn assignment for jQuery. Fn. Init. Prototype. That way,

The prototype object of jQuery is jQuery. Fn (notice jQuery = function(return new jQuery. Fn. Init ())).

After the assignment. When it's called, when there's no method in init, it's called from the prototype function.

So in that case.

You might think of something like this:

 
jQuery.extends() 
jQuery.fn.extends() 

I think you see the difference.

JQuery. Extends () is a direct extension of jQuery, and jQuery. Fn. Extends () is an obvious prototype of an extension.

This is why most of the methods in jQuery. Fn. Extends () make their way to jQuery. Extends ().

Here again the jQuery. Fn assigned to the jQuery. Fn. Init. Prototype.

So here's the relationship:

 
jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype