jQuery对象是怎么创建的

一、jQuery源码

　　在jQuery中，$是jQuery的别名，执行“$()”就是执行“jQuery()”，执行“$()”返回的是一个jQuery对象，在源码中，它是这样定义的：

...
var jQuery = function() {
    return new jQuery.fn.init();
}
...
jQuery.fn = jQuery.prototype;

　　

　　其中，jQuery.fn.init()是一个构造函数，返回的jQuery对象就是通过实例化这个构造函数来创建的，init()在jQuery的原型中被定义：

...
var init = jQuery.fn.init = function() {
    ...
    return this;
}
init.prototype = jQuery.fn;

 

　　init()构造函数最后返回了这个新对象的引用，并用jQuery的原型覆盖了init()的原型。

 

二、分析

　　如果我们的目的是创建一个jQuery类，它包含了一系列方便我们调用的函数，实例化这个类得到jQuery对象，它可以这么写：

var jQuery = function() {
    ...
}
jQuery.prototype = { ... }

var jq = new jQuery();

 

　　显然，jQuery不是这样玩的，而是使用了无new构造：

var jQuery = function(){
    return new init();
}
var init = function(){
    ...
    return this;
}
init.prototype = { ... }

var jq = jQuery();

 

　　但是，为了层次更清晰或者其他原因，jQuery将init()构造函数的定义放在了jQuery.prototype里面，即：

var jQuery = function(){
    return new jQuery.prototype.init();
}
jQuery.prototype.init = function() {
　　...
　　return this;
}
init.prototype = { ... }

　　

　　关于为什么这么做的原因可以参考这里的讨论：https://cnodejs.org/topic/53e73361977012ba5590e66d

　　此时，还有一个问题：新创建的对象无法访问jQuery.prototype中的其他属性，解决方法是：将jQuery.prototype传递给jQuery.prototype.init.prototype：

var jQuery = function(){
    return new jQuery.prototype.init();
}
jQuery.prototype.init = function() {
    ...
    return this;
}
jQuery.prototype.init.prototype = jQuery.prototype;

 

三、总结

创建jQuery对象的整个流程如下：

1、调用$()方法；

2、调用jQuery.prototype.init()构造函数；

3、根据选择器不同返回不同的jQuery对象；

4、不同jQuery对象中公用的方法写在jQuery.prototype中；

5、将jQuery.prototype传递给jQuery.prototype.init.prototype，这样新创建的对象才可以访问公用方法；