jQuery源码解析对象实例化与jQuery原型及整体构建模型分析（一）

//源码剖析都基于jQuery-2.0.3版本，主要考虑到兼容IE

一、关于jQuery对象实例化的逻辑：

整个jQuery程序被包裹在一个匿名自执行行数内：

 (function(window,undefined){
       //......
 })(window);

外部程序不能直接调用jQuery对象的属性和方法，jQuery所有方法和属性被变成局部私有的。例如：

(function(window,undefined){
    var a = "我是a";
    var b = function(a){
           alert("我是b");
    }
 })(window);
 console.log(a);
//报错：a is not defined(a未定义)
 b();
//报错：b is not defined(b未定义)

既然所有方法和属性都是私有的，就存在一个问题，如何使用jQuery对象和对象的方法和属性呢？

这就产生了jQuery的接口$：(8825~8827行)

if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
}

这个逻辑处理了jQuery的对外接口，将自身赋给window对象下的$属性，同时还赋给了window对象下的jQuery属性，这样在全局下（window对象）就有了两个属性可以调取jQuery，分别是$和jQuery;

然后jQuery又是通过一个构造方法实现的(61~64行)

jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

通过上面的源码可以看到，jQuery是将两个参数selector,context传入一个init()方法（init()方法会返回一个对象）；

init立即执行获后获得的就是一个jQuery对象初始化对象。   193行 //return jQuery.makeArray( selector, this );

//通常的jQuery对象初始化
$(fuction(){
    //通过jQuery实现的具体业务逻辑
});

暂且不说写入自己的这个匿名方法参数的原理，$()就等于实现了jQuery()，也同等于init()执行并返回对象，这个对象就是jQuery对象的实例化。

还记得在jQuery通过window的自身扩展的$属性和jQuery属性来实现jQuery的接口，也就是说，jQuery实例化的方法还可以写成：

//通常的jQuery对象初始化
jQuery(fuction(){
    //通过jQuery实现的具体业务逻辑
});

以上就是jQuery对象实初始化的全部过程和内容，接下来正式进入jQuery原型的构建原理和extend内部扩展方法说明的内容：

继续剖析jQuery原型的构建原理：

从上面对象实例化的jQuery的过程可以知道，jQuery的对象原型是通过init()方法构造的，然而下面一段代码一定会让很多人疑惑（96~279行）。

jQuery.fn = jQuery.prototype = {......}

前面的构造逻辑已经表明了，jQuery对象是通过init()方法构造的，

那么jQuery的原型应该就是基于init构造方法的，为什么还要在这里写jQuery的原型呢？

所以往后看，源码283行有如下代码：

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

这行代码就是将前面写的jQuery原型赋给了init的原型，

所以，jQuery通过init()构造实例对象，最后还是基于自身的原型构造的。最终的原型链指向的还是jQuery.proptotype;

在源码96行可以看到，jQuery的原型是一个自定义的对象(前面有提到)；

jQuery.fn = jQuery.prototype = {......}

所以在源码的100行有这样的代码，重新将构造方法指向了jQuery，实现了jQuery的构造逻辑。

constructor: jQuery,

二、jQuery构建模型分析图

 

三、jQuery构建逻辑的实现过程（仿写jQuery）

1.创建一个闭包环境