Jquery 万行代码解析之路(一)—jquery对象

从今天开始读Jquery源码，并开始解析源码的思路，记下来备忘。后边会整理出一个完整的。

Write less,Do more！—Jquery理念

想必只要是学过前端，学过html+css+js这一套用来写网页的技术的人必然不能不知道大名鼎鼎的Jquery，但这里还是给零基础的童鞋进行一下科普，Jquery是一个前端js库，用来简便的操作DOM和Ajax，并且在创建动画，事件绑定上也比原生的js方便很多，极大的提高了前端程序猿们的开发效率，同时Jquery的闭包防止作用域污染，模块化(需要一定的版本)等非常完善。据说全世界一万个最热门的网站中有百分之55的网站使用Jquery，Jquery的实例可见一斑。

$('.class').html();
$('.class').find(selecter).val();
$().ready()

我们平常用Jquery来操作DOM时，上述的代码不少见，从代码中我们可以看出$()即Jquery()函数返回的应该是一个具有各种Jquery内部函数的对象，但却又不是一般的构造函数（理由和原因后边说）,对应这下边的源码来看。

// Jquery定义
jQuery = function( selector, context ) {

//这里其实返回的是new jQuery.fn.init( selector, context )
return new jQuery.fn.init( selector, context );

}

为什么要返回new jQuery.fn.init()呢

首先解释一下jQuery.fn就是jQuery.prototype两者是等价的，只是让字面上看上去是操纵的fn而不是原型，原型中的init方法是如下定义的

var init = jQuery.fn.init = function( selector, context, root ) {
//里面的内容暂时先不写，大致是用来对selector进行分析然后创建对象用的
}
//在这个函数后边有如下代码
// Give the init function the jQuery prototype for later instantiation（将jquery的原型赋给init的原型，既让init对象和jQuery对象拥有一样的原型）
init.prototype = jQuery.fn;

那为什么要如此麻烦的构造呢，注意到源码是使用严格模式进行编码的，也就是说this在非new的函数中是undefined，而用户在使用jQuery的时候并没有去new $()或者new jQuery()这种方式，所以必须在内部new一个对象返回出去，但是原意是想new一个jQuery对象却又想用jQuery这个函数若是代码按如下的方式写

// Jquery定义
jQuery = function( selector, context ) {

//这里其实返回的是new jQuery.fn.init( selector, context )
return new jQuery( selector, context );

},

聪明的读者一看就知道会造成循环构造，所以这个方法是行不通的，所以jQuery的作者使用了一种非常巧妙的方法去做这种事这就是上边为什么这么做的原因。

来解释一下这么做为什么是可行合理的，首先，jQuery()函数返回的是new的一个jQuery.fn.init()对象，并不是jQuery对象，若仅仅这样，init对象并不是jQuery，并没有jQuery的所有方法，所以在后边又用init.portotype = jQuery.portotype来使init成为jquery的一个引用，使得new出来的对象具有jQuery的所有方法，有读者又会问，jQuery调用init，init原型又是jQuery的原型就不会造成循环了吗，答案是不会的，因为这里只是原型的引用，在运行的时候并不会去运行，就像学过链表和递归的同学都应该知道，在函数无限的调用自身函数会死循环，而头尾相接的链表是完全合理可以存在的。

下一篇预告，上边代码中不是缺了init的详细代码么，你懂得。。