Javascript, seltsames Verhalten in einer Schließung

Question

Ich habe mit Javascript herumgespielt (sprich: gelernt) und bin dabei auf etwas gestoßen, das mir sehr merkwürdig erscheint. Es hat mit Schließungen und einer Referenz zu tun, die ihre Bedeutung für den Browser zu "verlieren" scheint.

Der von mir verwendete Browser ist Chromium 5.0.307.7 .

Wie auch immer, hier ist etwas Code:

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();
}

Was hier passiert, ist, dass das erste Argument in das richtige HTMLElement geschrieben wird, aber alle folgenden nicht. Was zu passieren scheint, ist, dass nach dem ersten Argument die folgenden Argumente in ein anderes Element geschrieben werden, das nun von "elem" referenziert wird.

Ich sollte auch erwähnen, dass dies nur zu passieren scheint, wenn ich etwas direkt nach dem Aufruf dieser Funktion schreibe, wie dies:

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

Wenn ich nach dem Aufruf dieser Funktion nichts mehr schreibe, scheint es zu klappen.

Wenn ich stattdessen den obigen Code ändere in:

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();
}

Alles ist prima. Meine Frage ist, was passiert wirklich hinter den Kulissen der ersten Version?

エディテージ : Aktualisiert mit angeforderten Details über "...schreibe etwas direkt nach..." und Browsernutzung wie angefordert von ntownsend . Bryan Matthews Ich bin mir nicht sicher, wie ich eine Testseite bereitstellen kann, ohne dass diese Frage zu unübersichtlich wird.