Javascript 闭包 : primitive vs reference behaviour

Question

我希望有人能向我解释下面代码中发生的事情。我发现很难理解为什么这个闭包以不同的方式对待原语和引用。我希望我在这里遗漏了一些明显的东西。

function returnFunction(x, y) {
  return function() {
      alert("x:" + x + " - nb of elements in y:" + y.length);
  };
}

var f = 0;
var g = [];
var h = [];

for(var i = 0; i < 3; i++) {
  f += 1;
  g.push(i);
  h.push(returnFunction(f, g));
}

for(var i = 0; i < 3; i++) {
  h[i]();
}

// this is what gets returned
// x:1 - nb of elements in y: 3
// x:2 - nb of elements in y: 3
// x:3 - nb of elements in y: 3

// why do x and y get treated differently by js in this case?

Answer 1

This is because, The context was bound to the reference, not to the snapshot of the reference when it got called/created.

让我们逐 block 浏览代码以更加清晰

for(var i = 0; i < 3; i++) {
  f += 1;
  g.push(i);
  h.push(returnFunction(f, g));
}

上面的循环执行了 3 次，每次都在 g 数组和 h 数组中放入一些值。

所以让我们进入内部，填充值是什么。在此之前，请清楚下面的代码。

function returnFunction(x, y) {
  return function() {
      alert("x:" + x + " - nb of elements in y:" + y.length);
  };
}

调用上面的函数一次，将返回一个函数，再次调用它意味着无论你第一次收到什么引用，它都会显示一个警告。简而言之 (returnFunction(5,[4,5,6])()) 将显示一个警报“x:5 - nb of elements in y: 3”。//看起来 y 接受了一个数组参数，因为在 alert 中我们有 y.length 属性。

填充值

循环数:

1. - - - - f = 1 - - - - g = [1] - - - - h[调用时返回函数 (1, array-g[1])]

2. - - - - f = 2 - - - - g = [1,2] - - - - h[调用时返回函数 (1, array-g[1] ), 调用时返回函数 (2, array-g[1,2])]

3. - - - - f = 3 - - - - g = [1,2,3] - - - - h[调用时返回函数 (1, array-g[ 1]), 调用时返回函数(2, array-g[1,2]), 调用时返回函数(3, array-g[1,2,3])]

最后

for(var i = 0; i < 3; i++) {
  h[i]();
}

我们正在遍历 h 数组，即我们在上述解释中的循环 3 处数组 h 中的值。它具有已经具有上下文值的内部函数。即它知道每次调用时 x 是什么，y 是什么。请记住，第二个参数是我们发送的 h 数组引用。

因此，如果我们执行像 h[i]() 这样的函数，它会使用第一个 x 的主值和 y 数组引用来执行。即使当我们用 g 数组调用 returnFunction 并且它只有一个值时，返回的函数与引用绑定(bind)，而不是在那个快照中它是什么有。所以输出将数组大小打印为 //x:1 - nb of elements in y: 3

在执行 returnFunction 时，第二个和第三个循环也是如此。