Javascript，闭包中的奇怪行为

Question

我正在玩弄（阅读：学习）Javascript，发现了一些我理解的东西，看起来很奇怪。它与闭包和似乎“失去”其对浏览器重要性的引用有关。

我使用的浏览器是 Chromium 5.0.307.7。

不管怎样，这里有一些代码：

HTMLElement.prototype.writeInSteps = function() {
  var i = 0;
  var elem = this;
  var args = arguments;

  function step() {
    elem.innerHTML += args[i];

    if(i < args.length) {
      i += 1;
    } else {
      elem.innerHTML = "";
      i = 0;
    }


    setTimeout(step, 500);
  }

  step();
}

这里发生的是第一个参数被写入正确的 HTMLElement，但后面的所有参数都没有。似乎发生的情况是，在第一个参数之后，以下参数被写入到现在被 'elem' 引用的某个其他元素。

我还要提一下，这似乎只有在我调用这个函数后直接写东西时才会发生，像这样：

div.writeInSteps("This", " is", " not", " working");
$id("body").innerHTML += "Doh!";

如果我在调用这个函数后不写任何东西，它似乎工作正常。

如果我将上面的代码改为：

HTMLElement.prototype.writeInSteps = function() {
  var i = 0;
  var e = this.id;
  var args = arguments;

  function step() {
    var elem = $id(e);
    elem.innerHTML += args[i];

    if(i < args.length) {
      i += 1;
    } else {
      elem.innerHTML = "";
      i = 0;
    }


    setTimeout(step, 500);
  }

  step();
}

一切都是花花公子。我的问题是，第一个版本的幕后究竟发生了什么？

编辑：根据ntownsend 的要求，更新了有关“...直接在...之后写一些东西”和浏览器使用情况的请求详细信息。 Bryan Matthews，我不知道如何提供一个测试页面而不会使这个问题过于混乱。

Answer 1

我怀疑这是 DOM 问题，而不是 JavaScript 问题。

我的猜测是某些东西正在改变您尝试逐步写入的元素的祖先。例如，如果设置了元素父级的innerHTML（我认为甚至设置为完全相同的字符串），那么您拥有的元素引用将指向不再位于 DOM 中的元素。每次通过 ID 重新获取元素将解决该问题。

Answer 2

如果您要替换 elem 的祖先的 innerHTML（根据您的示例，body 元素），则 elem 不再存在。当step 是在原来的elem 被破坏之后，elem 所引用的将是别的东西。

浏览器应该做的正确事情应该是删除elem引用，但它看起来不像这样做。

Answer 3

我的猜测是，setTimeout(step, 500); 回调的执行几乎不知道this 是谁——你是在调用当前元素的step 还是HTMLElement.prototype.writeInSteps.step()？

同时在两个不同的元素上尝试您的第二个代码（以便第二个 writeInSteps 在第一个超时之前出现）。我很确定它不会完全符合您的预期。

当然，杰夫也可能是对的。 innerHTML 按规范是只读的，写入它可能会或可能不会重建整个树（并杀死所有引用）。