XMLHttpRequestとコールバックのバインディングが機能しない

Question

私は単純なget関数をコールバックパラメータを受け付けるXMLHttpRequestを使用しています。計画は、onloadイベントハンドラでコールバックを呼び出すことです。

get(url,doit); 

function doit(data) { 
    alert(data) 
} 
function post(url,callback) { 
    var xhr=new XMLHttpRequest(); 
    xhr.onload=function() {      // Version 1 
     callback(xhr.response) 
    } 
    xhr.onload=callback.bind(xhr,xhr.response); // Version 2 
    xhr.open('get',url,true); 
    xhr.send(data); 
} 

コールバック関数は、Ajaxのコールからの応答であると考えられる一つのパラメータ、dataがあります。ここでは

は簡易版です。

私は、コールバックを呼び出す2つのバージョンがあります：

1. バージョン1は、単にイベントハンドラ関数内でコールバックを呼び出します。
2. バージョン2は同じ処理を行うためにbindを使用します。 thisはxhrオブジェクトに設定され、xhr.responseは引数として送信されます。

バージョン1を使用すると、すべて正常に動作します。バージョン2を使用する場合、dataパラメータは空です。

私はXMLHttpRequestと.bind()をかなりよく知っていると思っていましたが、なぜ2番目のバージョンが空であるのか分かりません。ここでは何が起こっていませんか？答えに

コメント

おかげで、私はそれを持っていると思います。

.bind()は、この段階では、何もないxhr.responseTextの現在値、直ちに実行されます。

私がの将来の値で応答する必要がある場合は、最初のバージョンが望ましいと思われます。

ありがとうございます。

Answer 1

すぐにcallback.bindが実行されるためです。それが実行された時点で、要求がまだ完了していないので、xhr.responseTextは明らかに利用できません。これを試して結果を見ることができます。

function doit(data) { 
    alert(data, this.responseText); 
} 

Answer 2

これはbindの挙動である：パラメータがバインドされたときに、バインドさ値は、その時点で参照されたオブジェクト、またはプリミティブの値です。ここ

は、単純なコードスニペットである：

function operate(callback) { 
    let a = { 
    display: 'AAA' 
    }; 
    setTimeout(callback.bind('ThisObj', a.display), 1000); 
    a.display = 'AAA222'; 
} 

operate(function(data) { 
    console.log(data); 
}); 

印刷結果である：AAA、a.displayがバインドさとa.displayがプリミティブ型（文字列）であるよう - バインドモーメント（AAA）での値であります合格。

xhr.responseの場合、これは文字列型のためです。オブジェクトがパラメータとしてバインドされた場合は、そのオブジェクトの参照がバインドさ機能を意味し、渡される

---

が最新の値になるだろう：

function operate(callback) { 
    let tmp = { 
    t: 'AAA' 
    }; 
    let a = { 
    display: tmp 
    }; 
    setTimeout(callback.bind('ThisObj', a.display), 1000); 
    tmp.t = 'AAA222'; 
} 

operate(function(data) { 
    console.log(data); 
}); 

を印刷結果は次のとおりです。{ t: 'AAA222' }

注：変数aが上記の例の値を別のオブジェクトに変更した場合、バインドされた参照値は変更されません（以前の参照オブジェクトのままです）。

function operate(callback) { 
    let a = { 
    display: 'AAA' 
    }; 
    setTimeout(callback.bind('ThisObj', a), 1000); 
    a = { 
    display: 'AAA222' 
    }; 
} 

operate(function(data) { 
    console.log(data); 
}); 

印刷結果は次のとおりです。{ display: 'AAA' }