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

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

WBOY

Release： 2016-05-16 17:20:38

Original

1136 people have browsed it

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