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