jQuery 中的 .slice() 方法常用于从已经选中的元素集合里截取一个子集，例如截取第 2 到第 4 个 <li> 元素。很多资料会把它和数组的 slice 方法类比，但 jQuery.fn.slice() 返回的并不是一份 DOM 节点的深拷贝，而是一个持有原节点引用的新 jQuery 对象。理解这个浅拷贝特性，对后续链式操作、缓存子集以及维护元素状态都非常关键。本文会从源码实现、引用关系和实际开发中的注意事项三个维度进行剖析。
先明确一个结论：jQuery.fn.slice() 返回的新 jQuery 对象与原 jQuery 对象是两个独立的容器，但容器里保存的元素引用是同一批。也就是说，对集合结构的增删不会互相影响，而对元素本身的修改会同步反映到另一个集合中。
源码层面：slice 方法和 pushStack 如何协作
在 jQuery 源码中，jQuery.fn.slice 的实现非常简短。它首先借用数组原生的 slice 方法，把调用对象当作类数组处理，然后通过 pushStack 将得到的普通数组重新包装为 jQuery 对象。简化后的代码如下：
// jQuery 源码简化示意
var slice = Array.prototype.slice;
jQuery.fn.slice = function() {
return this.pushStack(slice.apply(this, arguments));
};
jQuery.fn.pushStack = function(elems) {
var ret = jQuery.merge(this.constructor(), elems);
ret.prevObject = this;
ret.context = this.context;
return ret;
};
这里 this 是调用 .slice() 的 jQuery 对象。jQuery 对象并不是真正的数组，但它通过数字属性和 length 属性模拟了类数组结构。借助 Array.prototype.slice.apply(this, arguments)，可以把这个类数组对象转换为真正的元素数组。注意这一步只是把原来对象中索引位置的值复制到新数组中，并没有克隆任何 DOM 节点。
pushStack 接收到普通数组后，会创建一个新的 jQuery 实例，并用 merge 把数组元素逐个写到实例的索引属性上。同时它还会记录 prevObject 指向原集合，这样调用 .end() 时才能回到上一层。这个新实例的 context 一般继承自原实例。整个过程只涉及引用搬运，不涉及节点复制。
浅拷贝的具体表现：共享 DOM 元素，独立 jQuery 状态
用一个简单列表来验证。假设页面结构如下：
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
执行以下脚本：
var $list = $('li');
var $slice = $list.slice(1, 3);
console.log($list.length); // 4
console.log($slice.length); // 2
$slice.css('color', 'red');
// 原集合中的第二、第三个 li 文字颜色也变红
console.log($list.eq(1).css('color')); // red
从结果看，$slice 只包含两个元素，$list 仍然有四个元素，这说明 jQuery 容器本身互不影响。但 $slice.css('color', 'red') 会让原集合中第二、第三个 <li> 也变红，因为它们指向同一个 DOM 元素。
如果后面执行 $slice.each() 修改文本，$list 中对应文本也会变化。反之，如果只操作 jQuery 集合本身，例如 $slice = $slice.add($('p')) 或者 $slice.filter()，则不会改变原集合的内容和长度。这正是浅拷贝的典型特征：容器独立，元素共享。
浅拷贝的边界：什么时候必须使用 clone()
有些业务场景需要真正独立的 DOM 副本，例如把原列表的一部分抽取出来做预览，但修改预览时不能影响原列表。.slice() 本身无法满足这一点，因为它的结果仍然共享 DOM 节点。这时需要显式调用 jQuery 的 .clone() 方法。
var $slice = $list.slice(1, 3).clone();
$slice.css('color', 'blue');
// 原集合中的 li 不会变成蓝色
console.log($list.eq(1).css('color'));
.clone() 会创建每个 DOM 节点的副本，包括子节点和属性。不过默认情况下事件处理函数不会被复制，除非传入 true 参数。而且 clone 生成的节点默认不在文档中，需要执行插入操作。使用 .clone() 的代价是额外内存和潜在的 ID 冲突，因为克隆节点会保留原 id 属性，如果直接插入文档可能破坏选择器唯一性。因此只有在确实需要隔离修改时才应克隆。
浅拷贝并不是缺陷，它让 jQuery 的链式操作非常轻量。设想对一个包含上万个节点的集合执行 .slice() 时，如果默认深拷贝 DOM，性能代价会急剧上升。保留引用意味着只创建一个轻量容器，这正是 jQuery 设计的合理之处。
实战中的典型误区和避坑建议
第一个误区是认为 .slice() 返回的集合保存了元素快照。实际上它保存的是元素引用，不是快照。如果后续代码修改了原节点，切片集合也能看到变化。例如先切片，再给原集合中某元素添加类，切片中对应元素的类也会变化。这个特性在需要实时同步时很方便，但在需要隔离历史状态时会造成难以追踪的 bug。
第二个误区是把切片集合的元素从文档中移除后再缓存使用。比如以下代码先切片，再移除原集合，但切片仍然持有这些 DOM 节点的引用，可以重新插入文档：
var $items = $('li');
var $subset = $items.slice(0, 2);
$items.remove();
// $subset 中的两个 li 虽然已不在文档中，但仍保留引用，可以被重新插入
$('ul').append($subset);
这种用法本身没有问题，但要意识到这些节点即便不在文档中，仍然被 jQuery 对象引用，不会被垃圾回收。如果不再需要，应及时解除引用，避免内存泄漏。
最佳实践可以总结为：只读遍历或筛选时放心使用 .slice()；需要隔离修改时使用 .clone() 并注意事件与 ID 问题；需要缓存历史状态且 DOM 可能被修改时，记录必要的数据而不是依赖 jQuery 引用；涉及大量节点时优先考虑引用共享以节省内存。
jQuery.fn.slice浅拷贝jQuery集合修改时间：2026-08-23 02:41:40