IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

XMLHttpRequest の onreadystatechange の this

個人的に

Ajax を使ったプログラミングをしたことがほとんどない。数回あったけどライブラリ経由で XMLHttpRequest は触らなかった。

仕事でも

Prototype.js とか MochiKit とかなので XMLHttpRequest を直接使ったことがない。

用事で使ってみなければならなくなった。

最初に見様見まねで書いたコード

//Executable
var req = window.XMLHttpRequest ? new XMLHttpRequest() : (function() {
    try      { return new ActiveXObject("Msxml2.XMLHTTP");    }
    catch(e) { return new ActiveXObject("Microsoft.XMLHTTP"); }
})();
req.onreadystatechange = function() {
    switch (this.readyState) {
        case 1: // Open
        case 2: // Sent
        case 3: // Receiving
            break;
        case 4: // Loaded
            alert(this.responseText);
    }
};
req.open('GET', '.');
req.send(null);

でも、これは動かなかった

this を req にしたらうまくいった。

//Executable
var req = window.XMLHttpRequest ? new XMLHttpRequest() : (function() {
    try      { return new ActiveXObject("Msxml2.XMLHTTP");    }
    catch(e) { return new ActiveXObject("Microsoft.XMLHTTP"); }
})();
req.onreadystatechange = function() {
    switch (req.readyState) {
        case 1: // Open
        case 2: // Sent
        case 3: // Receiving
            break;
        case 4: // Loaded
            alert(req.responseText);
    }
};
req.open('GET', '.');
req.send(null);

なぜ this不定なのか

this は、ブラウザによって値が異なり、 arguments.callee の値だったり Global オブジェクトの値だったり、 req だったりした。
this が Global オブジェクトになるってことは内部的にこうよばれたのと等しい

req['onreadystatechange']();

this が req になるってことは内部的にこうよばれたのと等しい

req.onreadystatechange();

this が arguments.callee になるってことは内部的にこうやって呼ばれたのと等しい(!?)

req.onreadystatechange.apply(req.onreadystatechange);

でも、なぜ??

W3C 的にはどうなんだろう。

http://www.w3.org/TR/XMLHttpRequest/
読んでみたけど特に明記されてないように思う。

this が使えたら

(window.Hoge=function(){}).prototype=new XMLHttpRequest();
Hoge.prototype.onreadystatechange = function() {...}
var hoge = new Hoge();

とかして、オブジェクトに組み込めるのに。こっちのがかっこいいよね。

とにかく

onreadystatechange の this は使えない