jQuery源码分析——jQuery对象怎么来的

关于jQuery源码的分析文章有很多，这篇文章没有更多新的内容，只是最近在研究jQuery对象的时候整理了一些方法，本着互联网共享的精神，遂拿出来给大家分享。再次声明，本文没有更多新的内容，只是对那些还没有研究过jQuery的朋友们的一次简单的介绍，希望你们看完之后会对jQuery源码感兴趣。如果文中出现了错误，还请各位高手指出。

首先来看一看我们要研究的部分：

var jQuery = (function() {
var jQuery = function(selector) {
return new jQuery.fn.init();
};
jQuery.fn = jQuery.prototype = {
init : function(selector) {
// selector process
}
};
jQuery.fn.init.prototype = jQuery.fn;
return jQuery;
})();

上面的代码是早期的jQuery源码中的一部分（有修改），目前的源码已经修改过，但是本质上原理是一样的。

我们暂且不看这部分源码，转而从另一个角度去研究。

观察下面一段代码：

var Q = (function() {
function M(selector) { // 这是实际返回的对象M的构造函数
// selector process
}
var Q = function(selector) { // 这是一个假的构造函数，实际上返回的是M对象
return new M(selector);
};
return Q;
})();
var q1 = new Q();
var q2 = Q();
q1.constructor === q2.constructor; // true
q1 instanceof Q; // false q1实际上为M对象，但是M在匿名函数内定义，外部无法访问

这段代码的目的是创建新的对象，要求很简单：能够兼容工厂方法Q()和new运算符操作创建对象。

事实上这段代码已经满足了需求，但是值得注意的是，这段代码生成的对象并不是Q对象，而是定义在匿名函数内的M对象。

为了使返回的对象是Q对象，那么返回的对象必定要继承Q.prototype，请看下面的代码：

var Q = (function() {
function M(selector) {
// selector process
}
var Q = function(selector) { // 还是一个假的构造函数，返回M对象
return new M(selector);
};
M.prototype = Q.prototype; // 为了使返回的对象为Q对象，将Q的原型赋值给M的原型
return Q;
})();
var q1 = new Q();
var q2 = Q();
q1 instanceof Q; // true q1即继承了M又继承了Q，实际上M和Q的原型相同，所以q1是Q对象
q1.constructor === Q.prototype.constructor; // q1为Q对象，其构造函数是匿名函数

该方法返回了Q对象，当然，它同时也是M对象。同样的，我们还是无法访问M对象。

var Q = (function() {
var Q = function(selector) {
return new Q.prototype.init();
};
Q.prototype.init = function(selector) { // 这里用Q.prototype.init对象替换了M对象
// selector process
};
Q.prototype.init.prototype = Q.prototype; // 同理，将Q的原型赋值给Q.prototype.init的原型
return Q;
})();
var q1 = new Q();
var q2 = Q();
q1.init.prototype === Q.prototype; // true 该方法和上一种方法的区别在于q1可以访问Q.prototype.init对象，而上一种方法则无法访问M对象
q1 instanceof Q.prototype.init; // true
q1 instanceof q1.init; // true

更改过的方法和上一个方法的区别在于使用了Q.prototype.init对象代替M对象，此时，我们创建的对象继承了Q.prototype，或者说Q.prototype.init.prototype，最重要的是，这里的Q.prototype.init可以被访问。

var Q = (function() {
var Q = function(selector) {
return new Q.fn.init();
};
Q.fn = Q.prototype = { // 该方法和上一种方法的唯一区别在于新创建一个fn属性代替prototype属性，其余和上一种方法相同
init : function(selector) {
// selector process
}
};
Q.fn.init.prototype = Q.fn;
return Q;
})();
var q1 = new Q();
var q2 = Q();

最后，我们通过将Q.prototype用Q.fn代替，就得到了上面的代码。上面的代码就是类似于最开始的jQuery的源码。到此为止，我们已经知道jQuery对象时怎么来的了。