分析jQuery的内部原理和实现

在此期间，我一直在学习和研究jQuery的源代码，受益于jQuery不断增长的实力。学习jQuery的大牛越来越多，学习的资料也比前两年更容易找到。有很多非常好的资源，比如高云的jQuery1.6.1源代码分析系列。这些教程详细分析了jQuery的内部原理和实现，对学习和理解jQuery有很大的帮助。但是我个人认为很多教程并没有掌握jQuery的整体结果，所以我尝试从整体上来解释jQuery的内部实现。

众所周知，jQuery的调用方式有两种，一种是高级实现，通过传递一个参数实现DOM选择，比如通过$(“h1”)选择所有h1元素，另一种是低级实现，通过$.ajax实现ajax操作，那么，这两种方法有什么区别呢？使用typeof函数检测$ ('h1 ')和$。ajax，类型分别是object和function，稍微学过jQuery的人都知道或者听说过。前者返回一个jQuery对象，那么什么是jQuery对象，它和jQuery是什么关系？我们先来传递for (var I in $(”)文档. write(I " :3360: " $(" ")[I]" ")；打印jQuery对象的属性和对应的值，可以看到它有100多个属性。通过console输入$(“*”)，可以看到大部分属性都是继承自jQuery的原型，而jQuery对象其实就是这样一个对象：

让我们推测一下jQuery的实现可能是这样的：

函数jQuery(){ this[0]=' Some DOM Element '；这个[1]=“一些DOM元素”；这个[2]=“一些DOM元素”；this . length=3；this.prevObject=“某些对象”；this.context=“某个对象”；this.selector=“某个选择器”；} jQuery。prototype={ get: function(){ }，each:function () {}，}这些代码可以通过新的运算符创建具有上述属性的jquery对象，但实际上，当我们调用jQuery来创建jQuery对象时，并没有使用新的运算符。这是怎么发生的？看看jQuery实现：

var jQuery=function(selector，context){//jQuery对象实际上只是init构造函数‘增强’返回new jQuery.fn.init(selector，context，rootjQuery)；} jquery . fn=jquery . prototype={ jquery : core _ version，init:function(选择器，上下文){//有些代码返回这个；}//那里有些代码/.} jquery . fn . init . prototype=jquery . fn；这里有一些聪明的东西。第一点是通过使用jQuery原型属性的init方法来创建没有new的对象。第二点是在init方法中处理这一点。我们知道，如果一个jquery的实例是通过调用init返回的，那么这个实例必须继承jQuery.prototype的属性，而这个in init将继承jquery.prototype的属性，但是这个in init受到范围的限制，不能访问jQuery.prototype的其他属性，jQuery通过说‘jQuery.fn . init . prototype=jQuery.fn’来将其原型指向jQuery . fn，这样init生成的jQuery对象就具有了jQuery . fn的属性。

至此，jQuery的基本原型已经浮出水面。这里有两个对象，一个是jQuery，另一个是这个构造函数生成的对象(我们称之为jQuery对象，和普通对象没什么区别)，如下图：所示。

可以看到，jQuery构造函数和jQuery.prototype都有自己的属性和方法，调用方法也不同。这两个对象都有一个扩展方法，用于扩展它们自己的属性和方法。在jQuery中，extend的实现实际上依赖于相同的代码，这将在下面的源代码分析中详细分析。