オブジェクトリテラルでthis.propertyにアクセスできないのはなぜですか？

Question

私はコードをオブジェクトに再構成してthisキーワードを使用しています。この問題は、小道具を設定してから2番目のメソッドが起動するときに発生します。myPropは未定義です。私はmyObjを使用して設定して取得するのではなく、うまく動作していることに気付きました。ここでの違いは何ですか？私は間違って何をしていますか？私はこれは、オブジェクトリテラルによって自動的にインスタンス化されたインスタンスのみを参照していましたが。

var myObj = { 
    SetProp: function (id) { 
     this.myProp = "abc"; 
     Ajax.GetJSONAfterStandardLogic(Utility.PrefixURL("/ajax/mymethod"), this.SetPropSuccess); 
    }, 
    SetPropSuccess: function (response) { 
     console.log("test " + this.myProp); 
    } 
} 

Answer 1

これらの関数を呼び出すと、おそらくthisがオブジェクトではない可能性があります。 thisは、関数が呼び出されたバインディングです。

あなたが有用であろう機能を呼び出している方法を実証するために少しより多くのコードが、あなたはそれを使用して動作させることができます。

myObj.SetProp.call(myObj, id) 

これは、に、SetProp関数呼び出しのために、thisとしてこのmyobjをバインドします。

これらの機能のいずれかにconsole.log(this)を入力すると、thisが期待していないことがわかります。

Answer 2

コールバック関数が実行されるとき、それは異なるスコープにあります。したがって、 "this"はそのスコープを参照し、 "myProp"は定義されていません。そのため、myObj.myPropの使用が有効です。スコープは有効なままです。

乾杯

this

Answer 3

変数は、関数が呼び出された方法に応じて設定されます。 objectReference.method()「ドット」構文thisを使用すると、自動的にオブジェクトに設定されます。関数を呼び出して、または.apply()を使用して、他のオブジェクトに明示的にthisを設定することもできます。あなたのケースでは

、あなたは（あなたが関数への参照を渡しているし、それはその後、GetJSONAfterStandardLogic()によって呼び出されたときにそれはあなたのオブジェクトにthisを設定した方法で呼び出されないコールバック関数として最も可能性が高いthis.SetPropSuccessを渡すとき、それは意志windowと等しくなります）。あなたがSetProp()のローカル変数にオブジェクトへの参照を保存することで問題を回避することができます

var myObj = { 
    SetProp: function (id) { 
     var self = this; 
     this.myProp = "abc"; 
     Ajax.GetJSONAfterStandardLogic(Utility.PrefixURL("/ajax/mymethod"), 
             function() { self.SetPropSuccess(); }); 
    }, 
    SetPropSuccess: function (response) { 
     console.log("test " + this.myProp); 
    } 
} 

クロージャの魔法を通じて、私はコールバックとして追加した匿名関数は、アクセス権を持つGetJSONAfterStandardLogic()に渡しますSetProp()の後の変数にも変数が実行された後、の実行が終了しました。

要するに、JavaScriptでは、JavaとC＃のようなクラスベースのOO言語で動作する方法とはまったく異なった働きをしていることが、thisです。 JavaScriptは依然としてOOですが、これらの違いは、通常、JavaやC＃からその言語に来る人を引き上げます。

さらにリーディング：https://developer.mozilla.org/en/JavaScript/Reference/Operators/this