「タイピングの様子を録画してあとから再生できるようにする」のソース読み

http://d.hatena.ne.jp/javascripter/20080520/1211314449
後学のために読んで、勝手にコメントつけてみます。
（インデントやセミコロン挿入など、好みに変更。ごめんなさい）

ソース読み

// 監視対象のエレメントtypingRec.target
var typingRec=function(elem){
    this.target=elem;
};

// .prototypeに関数を代入。この書き方は知らなかった。。
typingRec.prototype={
// start:録画開始
start:function(){
    // strは、対象の値がまるまる入る。timeは基準の時刻
    var str,time=new Date().getTime();
    var self=this;
    this.data=[]; // 差分の時刻とstrの配列
    // timerIdはsetIntervalの割り込みを解除するために使用
    this.timerId=setInterval(function(){
        // strの内容が変わっている場合
        if(str!=self.target.value)
            // data[]の中に、差分の時刻と対象の内容を格納
            self.data.push(
                [new Date().getTime()-time,self.target.value]
            ),str=self.target.value;
    },50);
},
// stop:録画停止
stop:function(){
    if(this.timerId)
        clearInterval(this.timerId);
},
// clear:データなどの初期化、リセット
clear:function(){
    this.stop();
    this.data=[];
},
// replay:差分時刻ごとに、各々の状態に戻す
replay:function(){
    var self=this;
    this.data.forEach(function(i){
        setTimeout(function(){
            self.target.focus();
            self.target.value=i[1];
        },i[0]);
    });
}
};

// typingRecのオブジェクトを生成。
// <del>対象はbodyということは全部書き換えてるのでしょうか。すごい強引だｗ</del>
// ご指摘があり、bodyというname属性をもったはてなのコメント欄を置き換えるものとのことでした。
var rec=new typingRec(document.getElementsByName('body')[0]);
rec.start();

setTimeout(function(){
    rec.stop();
    rec.replay();
    },10000);

感想

• forEachはArrayの標準な関数なのかな。たぶんIE6にはないとかいうオチがありそう。
• body要素をまるまる保存して再現する（？）力技には驚いた。単純に他の要素指定するのも可能ですね。
• getElementsByName('body')[0] この書き方もけっこう使いそう
• 昔課題にあったtyperecのプログラム（C言語）と比べるとかなり読みやすい・・・