JavaScriptクラスの関数this operator

Question

私はAJAXポストを含むJSクラスを持っています。私はthisを使って投稿機能内からクラスメンバーを参照しようとしていますが、動作していないようです。例えば

が、ここから：

function Classy() { 

    this.goal = 0; 

    $.post( 
    "class/initial.php", 
    function(back) {     
     this.goal = back.goal; 
    }, "json");  

    this.SampleFunction = function() { 
    alert(this.goal); 
    } 
} 

tester = new Classy(); 
tester.SampleFunction(); 

警告ボックスが、これはPHPファイルから戻って来ているものを間違いではないにもかかわらず、0の値を出力します。問題は親クラスを参照するのにthis以外のものが必要だと思います。誰でもアイデアはありますか？

Answer 1

function Classy() { 

    this.goal = 0; 

    // jQuery.proxy returns a function 
    $.post("class/initial.php", $.proxy(function (back) { 
     this.goal = back.goal; 
    }, this), "json"); 
     // ^-------- is manually set in your handler 

    this.SampleFunction = function() { 
     alert(this.goal); 
    } 
} 

。

---

別の可能性は、あなたがあなたの所望this値を与えるcontext:パラメータを設定することができ、長い形jQuery.ajax()^[docs]方法を使用することです。イベントハンドラで

function Classy() { 

    this.goal = 0; 

    $.ajax({ 
     type:'POST', 
     url:"class/initial.php", 
     dataType: 'json', 
     context: this, // <--set the context of the callbacks 
     success: function (back) { 
      this.goal = back.goal; 
     } 
    });  
    this.SampleFunction = function() { 
     alert(this.goal); 
    } 
} 

Answer 2

thisは、jQueryがコールバックで呼び出す匿名関数の中で、何か異なることを意味します。だから最初にそれをキャプチャ：あなたは正しいthis値を確保するためにjQuery.proxy()^[docs]メソッドを使用することができます

function Classy() { 

    this.goal = 0; 
    var $t = this; 

    $.post( 
    "class/initial.php", 
    function(back) {     
     $t.goal = back.goal; 
    }, "json");  

    this.SampleFunction = function() { 
    alert(this.goal); 
    } 
} 

Answer 3

、thisイベントを発射したオブジェクトを指します。 AJAX成功コールバックは、実際にはXMLHttpRequestオブジェクトのイベントハンドラです。この場合、thisはXMLHttpRequestオブジェクト（実際はjqXHRオブジェクト）を参照しています。 、あなたのオブジェクトへの参照を取得し、あなたのイベントハンドラ内から参照できる変数にthisを割り当てるには、次のクラスの概念は、ECMAScriptの1、2に存在しない

function Classy() { 
    this.goal = 0; 
    var that = this; 
    $.post("class/initial.php", function(back) {     
     that.goal = back.goal; 
    }, "json");  
}