jQuery源码学习 之 end与addBack

1. 理解原理

大多数QueryDOM遍历方法是操作jQuery对象实例，并创建一个新的对象，匹配一个不同的DOM元素集合。当发生这种情况时，实际上是新的元素集合被压入到对象内部维护的栈中，每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时，我们可以使用end()进行出栈操作，来返回栈中的前一个状态。

end()方法主要用于jQuery的链式操作中，当没有使用链式用法时，通常是调用变量名上的前一个对象，不需要操作栈。

链式的原理就是要返回当时操作的上下文。

总的来说，end()方法就是回溯到上一个DOM集合，因此，对于链式操作与优化，这个方法还是很有意义的。

2. jQuery中源码实现：

既然是回溯到上一个DOM集合，那么end()方法中肯定返回的就是一个jQuery对象了，所以我们看源码其实就是返回prevObject对象，如下：

end: function() {
  return this.prevObject || this.constructor(null);
}

prevObject在什么情况下会产生

在构建jQuery对象时，通过pushStack方法构建，如下：

jQuery.fn.extend({
  find: function(selector) {
    // ...... 省略 ......
    // 通过Sizzle选择器，返回结果集
    jQuery.find(selector, self[i], ret);

    // Need because $(selector, context) becomes $(context).find(selector)
    ret = this.pushStack(len > 1 ? jQuery.unique(ret) : ret);
    ret.selector = this.selector ? this.selector + " " + selector : selector;
    return ret;
  }
});

可以看到通过jQuery.find()得到了结果ret，这个就是通过纯的DOM节点，那么如果变成jQuery对象呢？

接着，我们看pushStack对象，作用就是通过新的DOM元素去创建一个新的jQuery对象：

pushStack: function(elems) {
  // Build a new jQuery matched element set
  var ret = jQuery.merge(this.constructor(), elems);

  // Add the old object onto the stack (as a reference)
  ret.preObject = this;
  ret.context = this.context;
  
  // Return the newly-formed element set
  return ret;
}

3. 流程解析

首先，构建一个新的jQuery对象，因为constructor是指向构造器的，所以这里就等同于调用jQuery()方法了，返回一个新的jQuery对象；

然后，用jQuery.merge语句把elems节点合并到新的jQuery对象上；

最后，给返回的新的jQuery对象添加prevObject属性。我们看到prevObject其实还是当前jQuery的一个引用罢了，所以也就是为什么通过prevObject能取到上一个集合的原因了。

4. addBack

addBack()实现是包含自身的选择器，使用它会选择出包含自己在内的元素集合。