Javascriptオブジェクトで予期しないスコープの振る舞い

Question

私のコンテクストの外でエラーを複製するのに最善を尽くしましたが失敗しましたので、それを提供する必要があります。

コード：

var view; 

widget = { 
    activated: false, 
    close: function(){ 
     this.view.popupManager.enabled = false; 
    } 
} 

view = new MapView({ 
}).then(function(){ //then is triggered when fully loaded; 
    console.log(this.popupManager) //Object! 
    widget.activated = true; 
    widget.view = this; 
} 

console.log(view.popupManager) //Undefined, not loaded yet 

$('#my_button').click(function(){ 
    if(widget.activated){ 
     widget.close() //this.view.popupManager is undefined 
    } 
}) 

これは、ESRIのJavascriptの4.3 APIを使用しているが、APIではないようですが、スコープはJavascriptでどのように機能するかについて私の部分の一部misuderstanding。

あなたは私だけviewが完全にロードされている場合、それはまだ私が何をしないのです古い、完全にロードされていないオブジェクトに

を参照widget.closeを呼び出していても、見ることができるように？

Answer 1

ここでの問題は、thisがあなたの考えであるとは限りません。コードにはthisがいくつかありますが、それぞれが異なります。

JavaScriptの歓迎はよくthisと誤解されています。コードで

widget = { 
    activated: false, 
    close: function(){ 
     this.view.popupManager.enabled = false; 
    } 
} 

this

はwidgetを参照します。あなたは、本質的にwidget.view = windowを言っているよう

今thenコールバック内のコードでは、thisは、windowオブジェクトを参照します。このthisはおそらくあなたを追い抜くものです。

私が何を意味すると次のようにコードを更新する必要があります。その場合には、新しいビューへのウィジェットの表示を設定することであると思われる：

var view; 

widget = { 
    activated: false, 
    close: function(){ 
     this.view.popupManager.enabled = false; 
    } 
} 

view = new MapView({ 
}).then(function() { 
    widget.activated = true; 
    widget.view = view; // set the widget's view correctly 
}); 

$('#my_button').click(function(){ 
    if(widget.activated){ 
     widget.close(); 
    } 
});