jQuery中pushStack的实现原理及应用实例

PushStack是jQuery内核中非常重要的一个函数，它的重要性使得它在jQuery的很多内部函数中被频繁使用。通常虽然很少使用，但是掌握这个功能不仅有助于理解jQuery的操作原理，也方便我们做更高级的jQuery操作。

顾名思义，pushStack是一种数据结构，是一种特殊的线性表，只能在一端插入和删除。数据放入栈中，类似于和我们一起进入电梯，然后先出去，如下图3360所示。

实际上，jQuery中的栈并不是真正的栈，而是在jQuery对象上附加了一个属性，指向当前对象的上一个对象，上一个元素可以通过end方法返回。以下：

span 1/span span 2/span span 3/span script $(“span”)。eq(0)。css('fontSize '，' 20px ')。end()。fadeOut(2000年)；/script上面的代码将使第一个跨度的字体大小为20px，并使所有跨度在2秒内fadaout。

PushStack是jQuery的一个实例方法，由jQuery对象调用，比如$()。pushstack(document . getelementsbytagname(' div '))。CSS('背景'，'蓝色')将所有div的背景设置为蓝色。那么pushStack的原理是什么，为什么传入的DOM对象可以用css操作？我们来看看jQuery中pushStack的源代码：

pushStack:函数(elems ) { //构建新的jQuery匹配元素集var ret=jQuery . merge(this . constructor()，elems)；//将旧对象添加到堆栈上(作为引用)ret.prevObject=thisret . context=this . context；//返回新形成的元素集ret}//jQuery.mergemerge:函数(第一，第二){ var l=second.length，i=first.length，j=0；if(type of l==' number '){ for(；j l；j ) {第一[ i ]=第二[j]；} } else { while (second[j]！==undefined){ first[I]=second[j]；} } first . length=I；先返回；}pushStack的实现比较简单，主要涉及jQuery的静态方法merge，用于合并对象。设计思想是在第一个对象的基础上附加第二个对象的属性(0到n)。理解这一点非常重要。回到pushStack函数，首先定义一个局部变量ret来存储合并后的对象，然后存储这个对象的prevObject和上下文属性，最后返回合并后的ret对象。这里有几点需要注意：1，this.constructor是jQuery的构造函数init，所以这个。构造函数()返回一个jQuery对象。2.由于jQuery合并函数返回的对象是第一个函数附带的第二个函数，所以ret也是一个jQuery对象，这可以解释为什么pushStack内外的DOM对象也可以由CSS操作。3.返回对象的prevObject属性指向前一个对象，因此可以通过该属性找到堆栈的前一个对象。