脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery.fn和jQuery.prototype区别介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

jQuery的源码是怎么样定义的：

. 代码如下:

(function( window, undefined ) {

var jQuery = (function() {
// 构建jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

// jQuery对象原型
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;

// 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
jQuery.extend = jQuery.fn.extend = function() {};

// 在jQuery上扩展静态方法
jQuery.extend({
// something to do
});

// 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
return jQuery;

})();

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

这里我们可以看到：

. 代码如下:

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

jQuery 其实jQuery.fn.init()返回一个对象。那么jquery.fn.init()返回的又是什么呢？

. 代码如下:

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

就是从这里来的，一个javascript对象。

这里有个问题。

. 代码如下:

jQuery.fn = jQuery.prototype

那么就是 将jQuery 的原型对象赋值给了 jQuery.fn。

再看下面：

. 代码如下:

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

看到这里我有一个想法。就是 将jQuery.fn 给了 jQuery.fn.init.prototype.

那么在这之前jQuery.fn.init.prototype.是什么？

是不是没有？这个时候它的原型是{};

那么为了可以去调用init外面的方法。就做了一个处理。

将jQuery.fn 赋值给jQuery.fn.init.prototype.这样的话，

jQuery.fn.init.prototype的原型也就是jQuery的原型对象就是 jQuery.fn ( 注意jQuery = function(return new jQuery.fn.init()))。

赋值了以后。在调用的时候，当init中没有方法的时候，就会去原型函数中调用。

那么这样的话。

你可能会想到这样一个东东：

. 代码如下:

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

我想你应该明白它们的区别了吧。

jQuery.extends()是直接扩展jQuery.而jQuery.fn.extends()，很明显是扩展的原型。

这就是为什么jQuery.fn.extends()中的大部分方法来自己于jQuery.extends()。

这里又将 jQuery.fn 赋值给了 jQuery.fn.init.prototype.

那么就有这样的一个关系：

. 代码如下:

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

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jQuery.fn和jQuery.prototype区别介绍全部内容，希望文章能够帮你解决js实例教程-jQuery.fn和jQuery.prototype区别介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。