jQuery pushStack() 方法：深入理解 DOM 操作的“回溯机制”
在 jQuery 的世界里，每一次 DOM 操作都像是一次旅行。你从一个起点出发，经过一系列选择、过滤和变换，最终抵达目标节点。但有时候，你可能会想：“如果走错了，能不能回退一步？”这正是 jQuery 提供的“历史记录”机制——pushStack() 方法的用武之地。
pushStack() 是 jQuery 内部用于维护操作栈的核心方法之一，它并不常被开发者直接调用，但理解它的作用，能让你对 jQuery 的链式操作和选择器机制有更深层的认知。尤其当你在开发复杂插件或调试链式调用时，掌握这个方法就像拥有了“时光机”。
什么是 jQuery pushStack() 方法？
pushStack() 方法是 jQuery 内部实现链式调用和选择器状态管理的重要组成部分。它将一个 jQuery 对象（即一组 DOM 元素）压入当前操作栈中，以便后续可以回溯。
简单来说，你可以把 pushStack() 想象成一个“操作记录本”：当你使用 find()、filter()、not() 等方法时，jQuery 会把当前的选择结果存入这个栈中，方便后续使用 end() 方法返回上一步的状态。
方法签名
jQuery.prototype.pushStack = function( elements ) {
// 将 elements 添加到内部栈中
var ret = jQuery.merge( this.constructor(), elements );
ret.prevObject = this;
return ret;
};
这个方法接收一个数组或类数组对象（通常是 DOM 元素集合），然后创建一个新的 jQuery 对象，将原对象的引用保存为 prevObject，从而建立“父子”关系。
pushStack() 如何工作？一个真实案例
让我们通过一个具体的例子来演示 pushStack() 的工作流程。
示例代码
// 选择所有 div 元素
var $divs = $( 'div' );
// 使用 find() 查找 div 下的 p 元素
var $ps = $divs.find( 'p' );
// 然后使用 filter() 进一步筛选
var $specialPs = $ps.filter( '.highlight' );
// 打印当前选中的元素
console.log( $specialPs );
// 输出：jQuery 集合，包含带有 .highlight 类的 p 元素
// 使用 end() 回退到上一步（即 $ps）
var $backToPs = $specialPs.end();
// 再次调用 end()，回到 $divs
var $backToDivs = $backToPs.end();
console.log( $backToDivs );
// 输出：jQuery 集合，包含所有 div 元素
详细解释
- 第一步：
$( 'div' )创建一个 jQuery 对象，选中所有<div>。 - 第二步：调用
find( 'p' )，内部会执行pushStack()，将p元素集合压入栈，同时保存原始div集合为prevObject。 - 第三步：
filter( '.highlight' )再次调用pushStack()，将过滤后的p.highlight压入栈，prevObject指向上一步的$ps。 - 第四步：
end()方法会返回prevObject，相当于“回退一步”，此时栈顶是$ps。 - 第五步：再次
end()，返回$divs，完成回溯。
💡 关键点：
end()方法内部就是通过prevObject属性来访问上一步的 jQuery 对象，而pushStack()正是建立这个链式结构的基础。
pushStack() 与链式调用的关系
链式调用是 jQuery 的标志性特性之一，比如：
$( 'button' )
.addClass( 'active' )
.css( 'color', 'red' )
.fadeOut( 500 );
这些方法之所以能连起来用，是因为每个方法都返回一个 jQuery 对象。而 pushStack() 在这些方法内部起到了“状态记录”的作用。
深入理解：链式操作的“记忆”机制
当调用 find()、filter()、not() 等方法时，jQuery 并不会直接修改原对象，而是创建一个新对象，并通过 pushStack() 将其压入栈中。这个新对象继承了原对象的 prevObject 属性。
// 伪代码示意（非真实实现）
find: function( selector ) {
var ret = this.constructor(); // 创建新 jQuery 实例
var elements = this[0].querySelectorAll( selector );
ret.pushStack( elements ); // 将结果压入栈
return ret;
}
这就像你在做拼图：每一步都生成一个新的拼图块，但你仍然能通过“返回上一步”找回原来的拼图。
pushStack() 的实际应用场景
虽然你很少会直接调用 pushStack()，但在开发插件或处理复杂 DOM 操作时，它就变得非常关键。
场景一：自定义插件中的状态管理
假设你正在开发一个“高亮文本块”的插件，需要支持“高亮 → 取消高亮 → 恢复上一步”的功能。
$.fn.highlight = function( className ) {
// 保存当前状态
var $self = this;
// 1. 先压入当前状态（用于后续恢复）
var $stacked = $self.pushStack( $self.get() ); // 等价于保存当前集合
// 2. 执行高亮操作
$self.addClass( className );
// 3. 返回当前对象，支持链式
return $stacked;
};
// 使用方式
$( 'p' ).highlight( 'important' ).end().css( 'font-weight', 'bold' );
在这个例子中，pushStack() 帮我们“记住”了高亮前的 DOM 状态，后续可以通过 end() 回退。
⚠️ 注意：
end()只能回退一次，如果需要多级回退，需手动管理栈。
pushStack() 的局限性与注意事项
尽管 pushStack() 非常强大，但也有它的使用边界。
1. 不是公开 API
pushStack() 是 jQuery 内部方法，不建议直接调用。如果你在代码中显式调用它，可能会破坏内部状态，导致 end() 失效。
2. 仅用于 jQuery 内部对象
它只能用于 jQuery 对象的链式操作中。如果你试图对普通数组或 DOM 节点调用 pushStack()，会报错。
// ❌ 错误用法
var arr = [ document.getElementById( 'test' ) ];
arr.pushStack( arr ); // 报错：arr.pushStack is not a function
3. 与 end() 配合使用
pushStack() 本身不会产生“回退”效果，它只是为 end() 提供数据支持。没有 end()，pushStack() 的价值就无法体现。
如何验证 pushStack() 的行为？
我们可以用一个简单的方法来验证 pushStack() 的效果。
// 创建一个测试用的 jQuery 对象
var $original = $( 'div' );
// 手动调用 pushStack 模拟链式操作
var $step1 = $original.pushStack( $( 'p' ).get() );
// 查看内部结构
console.log( $step1.prevObject ); // 输出：$original
console.log( $step1.length ); // 输出：p 元素数量
// 使用 end() 回退
var $back = $step1.end();
console.log( $back.length ); // 输出：div 元素数量
这个测试说明：pushStack() 成功创建了一个新对象，并通过 prevObject 保留了原始状态。
总结：pushStack() 是链式操作的“幕后英雄”
jQuery pushStack() 方法 虽然不常被直接使用，但它却是 jQuery 链式调用和选择器状态管理的基石。它就像一个“操作日志”系统，让你可以在 find()、filter()、not() 等方法之后，轻松地“回到过去”。
- 它帮助 jQuery 实现了“可逆操作”；
- 它是
end()方法的底层支持； - 它让复杂的 DOM 操作变得可维护、可调试。
对于初学者来说，理解 pushStack() 不是必须的，但如果你希望真正掌握 jQuery 的底层机制，尤其是开发插件或调试复杂链式调用时，它就是你不可或缺的“工具”。
记住：每一次 end() 的回退，背后都有 pushStack() 的默默支撑。
补充建议：深入学习路径
如果你想更深入地掌握 jQuery 的内部机制，建议：
- 阅读 jQuery 源码中
core.js文件的pushStack和end实现； - 使用浏览器 DevTools 在
pushStack调用处设置断点，观察prevObject的变化； - 尝试用原生 JS 重写一个简单的“链式操作栈”系统，理解其设计思想。
真正的开发者，不只是会用 API，更要理解它为什么这样设计。
jQuery pushStack() 方法，正是通往这个深度的入口之一。