jQuery源码学习1--jQuery对象的构建

先放上一段jQuery精简的源码(版本1.3.2);

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

       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function( selector, context, rootjQuery ) {

           }
       };
   
       // Give the init function the jQuery prototype for later instantiation
       jQuery.fn.init.prototype = jQuery.fn;

       jQuery.extend = jQuery.fn.extend = function() {};
 
       jQuery.extend({
  
       }); 
  
       return jQuery;
   
    })();
   
    window.jQuery = window.$ = jQuery;
})(window);

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

这么多jQuery看着有点头大,自己改改把里面的jQuery换成jq(个人习惯，不喜欢外部与内部使用相同的变量名)；

(function( window, undefined ) {   
    var jQuery = (function() {   
       var jq = function( selector, context ) {
           return new jq.fn.init( selector, context, rootjQuery );
       }  
 
       jq.fn = jq.prototype = {
           constructor: jq,
           init: function( selector, context, rootjQuery ) {
                console.log("I'm init ..."+(new Date()).getTime());
           }
       };
 
       jq.fn.init.prototype = jq.fn;
   
       jq.extend = jq.fn.extend = function() {};      
    
       jq.extend({
       });

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

接着看代码

最外层 (function( window, undefined ) {})() 自动执行；

接着　　var jQuery = (function() {}...

　　　　　　return jq;

　　　　)()　　继续自动执行；
以上外层代码可以略过...
通过源码可以看到其实jQuery=jq;所以重点关注下关键的jq;

(function( window, undefined ) {
   
    var jQuery = (function() {
       // 构建jq对象
       var jq = function( selector, context ) {
           return new jq.fn.init( selector, context, rootjQuery );
       }
   
       // jq对象原型
       jq.fn = jq.prototype = {
           constructor: jq,
           init: function( selector, context, rootjQuery ) {
				//...
           }
       };
   
       jq.fn.init.prototype = jq.fn;
   
       // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
       // 通过jq.fn.extend扩展的函数，大部分都会调用通过jq.extend扩展的同名函数
       jq.extend = jq.fn.extend = function() {};
      
       // 在jq上扩展静态方法
       jq.extend({

       });


        // 到这里，jq对象构造完成
       return jq;
   
    })();
   
    window.jQuery = window.$ = jQuery;
})(window);

jq对象是通过

return new jq.fn.init( selector, context, rootjQuery );创建的，而不是jq（）；

jq.fn = jq.prototype;
jq.fn可以作为特权方法，也可以作为原型方法调用，说不太清楚，暂时这样理解
比如   jQuery('args').init();
　　 　jQuery.fn.init();

jq.fn.init.prototype = jq.fn;
为构造函数return new jq.fn.init( selector, context, rootjQuery );创建的对象指向相同的fn对象;

很乱，暂时作为自己的学习记录吧