javascript - 令人难以置信的循环功能

Question

如果有人能帮助我理解这一点，我将印象深刻。这是来自John Resig's advanced JavaScript的#28 .

这是一个循环函数，如果您查看教程，它似乎运行了 3 次，产生了下面的 6 Pass。

能否请您用通俗易懂的语言尽可能详细地解释这个程序中发生的事情，并一路解释:

1. fn.call(array, array[i], i) 为什么函数有这 3 个参数，它们是如何工作的。该函数是否首先处理数组，然后是数组 [i]，然后是 i？当这一切发生时，发生了什么？

2. 此外，在函数中，我了解到 i++ 每次通过 array.length 时都会增加，但是触发 num++ 增加它的原因是值，以及 value == num++

   以什么方式

3. 在function(value, i)中，什么是value？循环数组的值是交替的0,1,2吗？如果是这样，这些循环数组编号如何作为参数传递给 function(value, i)

4. this instanceof Array 这试图显示什么？怎么样？

代码:

function loop(array, fn){ 
  for ( var i = 0; i < array.length; i++ ) 
    fn.call( array, array[i], i ); 
} 
var num = 0; 
loop([0, 1, 2], function(value, i){ 
  assert(value == num++, "Make sure the contents are as we expect it."); 
  assert(this instanceof Array, "The context should be the full array."); 
});

PASS Make sure the contents are as we expect it.
PASS The context should be the full array.
PASS Make sure the contents are as we expect it.
PASS The context should be the full array.
PASS Make sure the contents are as we expect it.
PASS The context should be the full array.

Answer 1

function是匿名函数，即没有名字的函数。 loop 的完整第二个参数是

function(value, i) {
  assert(value == num++, "Make sure the contents are as we expect it.");
  assert(this instanceOf Array, "The context should be the full array.");
}

这是一个完整的匿名函数，它接受三个参数:this (它是一个方法的对象)、当前值和循环计数器。

loop遍历数组，并使用 fn.call调用匿名函数，传递三个参数；这里，数组对象必须是显式的，因为 call不知道应该在什么上下文中调用正在调用它的函数引用(也就是说，在调用中要做什么 this)。

匿名函数，由 loop 调用, 接收数组为 this .第二个ASSERT验证这一点。它还期望数组的值为 [0, 1, 2]并通过递增 num 来验证这一点在每次调用时将其与传递的数组元素进行比较。

因此，遵循执行链:

1. num声明并初始化为 0。
2. loop([0, 1, 2], function ...)被调用。
3. loop调用 fn 、匿名函数、数组(如 this )、它的第一个元素和 i表示元素偏移量。 (i 从未实际使用过。)
4. 匿名函数ASSERT通过与 num 比较，它传递了预期的第一个元素 0并递增 num之后。
5. 匿名函数ASSERT就是它的this是一个 Array .
6. loop调用 fn与 #3 一样，但使用第二个数组元素。
7. 匿名函数再次执行其 ASSERT s，这次将传递的第二个数组元素(预期为 1)与 num 进行比较(由于步骤 4 中的后增量，它是 1)。
8. loop调用 fn和以前一样处理第三个数组元素。
9. 匿名函数执行其 ASSERT s 再次，这次将预期的数组元素 2 与 num 进行比较现在的值为 2。