jQuery each() - 它在内部是如何工作的？

Question

我查阅了jQuery源代码，但我必须承认这可能超出了我的理解范围 - 或者我找错了地方。请参见以下链接：https://github.com/jquery/jquery/blob/master/src/core.js。

大约在第222行左右有一个看起来是递归的函数，然后又在第566行左右声明了另一个位于"extend()"命名空间中的函数。

我只是好奇 - 这究竟是如何工作的？例如，当我调用：

$('.item').each(function(){
    // Do Something
});

它如何知道循环遍历DOM元素数组，何时停止，如何应用函数？它不能只做...

$('.item').doThis()

因为doThis()可能不是该对象的成员。

请给我指点，谢谢。

- netpoetica

---

https://github.com/jquery/jquery/blob/master/src/core.js#L596，那就是魔法发生的地方...没有递归。我承认`for`循环看起来有点奇怪，但并不复杂。 - Felix Kling

曾经尝试过阅读jQuery的源代码吗？那会更好。此外，90%的专业级别使用jQuery的人都不知道它是如何工作的。;) - deb0rian

真正的函数在第566行。 - Joe

@Fratyr 请看问题的第一句话... - Michael Berkowski

我想知道为什么像这样的问题被称为不具有建设性...它非常方便... - HIRA THAKUR

Answer 1

据我所知，这个与编程有关。

$('selector').each(func);

这相当于做这个：

func = ...;
$selector = $('selector');
for (var i = 0; i < $selector.length; i++) {
    if (func.call($selector[i], i, $selector[i]) === false) {
        break;
    }
}

$选择器返回的对象实际上是一个DOM元素数组，附带了许多额外的方法，因此您基本上可以像处理数组一样处理它。希望这能澄清问题！

- LukeGT

---

严格来说，它等同于 func.call($selector[i], i, $selector[i]);。 - Felix Kling

谢谢你的建议，Felix。你说得对。 - LukeGT

Answer 2

不，这不是递归的。在第222行上的函数是jQuery原型($.fn)上的函数，而它调用的函数是jQuery.each - 它是一个静态属性，在第566行被定义。注意extend的工作方式：如果未提供要扩展的对象，则使用this。它在代码的不同部分上应用于jQuery和jQuery.fn。

那么这到底是如何工作的呢？

$obj.each(callback)调用了$.fn.each方法，该方法将$.each应用于jQuery实例(DOM包装器)本身：第223行。

现在，在$.each中，有四种情况：带或不带提供的args数组，以及在类似数组的结构或其他对象上。您没有传递额外的参数，并且jQuery实例具有length属性，并且在数值索引中具有DOM元素，因此将执行第596行的循环。因此，您的调用等效于

for (var i=0, len=$obj.length; i<len; i++)
    if ( callback.call($obj[i], i, $obj[i]) === false ) break;

- Bergi

---

谢谢 - 你澄清了哪个函数是哪个，以及extend()方法在做什么方面特别有帮助。很遗憾这个线程被关闭了 - 我觉得更多的jQuery用户需要理解内部机制。唯一还有点困惑我的是迭代是如何发生的 - 例如，当我提供一个包含三个项目的数组时，如果它不是真正的参数，那么这个数组如何被带入each函数中呢？ - netpoetica

这是$.each的第一个参数 - obj。如果您使用$.fn.each，则会传递类似数组的jQuery实例本身(this)。 - Bergi

Answer 3

每个在jQuery中进行的查询都被存储为一个类似数组的对象，这意味着你可以通过以下方式访问查询找到的DOM元素列表：

$('.item')[0] //The first item found by your query

在内部，$().each使用$.each来迭代您的集合，调用您作为参数传递的函数，并使用'Function.apply'将'this'设置为当前正在迭代的对象。

- Clark Pan

Answer 4

请查看源代码中的第566至605行。

这是一个迭代且相当简单的过程。

- Stephen