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 重新获取元素可以解决该问题。