Javascript 个对象中的意外范围行为

Unexpected scope behaviour in Javascript objects

我尽力在我的上下文之外复制错误但失败了,所以我必须提供它。

代码:

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,但我对范围在 [=26 中的工作方式有一些误解=].

如您所见,即使我只在 view 完全加载时调用 widget.close,它仍然引用旧的、未完全加载的对象

我错过了什么?

这里的问题是 this 并不总是您认为的那样。您的代码中有几个 this,每个都不一样。

欢迎来到JavaScript的经常被误解的this

在代码中

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

this 将引用 widget.

现在在 then 回调中的代码中,this 将引用 window 对象,因此您实际上是在说 widget.view = 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();
    }
});