javascript - 匿名函数、作用域和变量

Question

function UpgradeShop(){
    var selectedIndex;

    var category_btns = [];
    for(var i = 0; i < 5; i++){
        category_btns[i] = new Button(38, 68 + i * 75, 284, 70);
        category_btns[i].action = function() {
            selectedIndex = i;   // ?
            draw_ui();           // ?
        };
    }

    this.draw_ui = function(){
       ...
    }
}

我有一个名为 Button 的自定义类，我想创建其中 5 个。我给了他们每个 Action 变量，当检测到点击时执行该变量。

变量selectedIndex以及方法draw_ui在我声明这些函数的类中找到，不是按钮类(class)。我注意到，无法找到简单地调用 draw_ui() ，并且 this.draw_ui() 尝试在 Button 类中查找该方法。如何断言函数调用和变量分配定向到定义类？

Answer 1

对于问题的第一部分，请参阅以下答案:JavaScript closure inside loops – simple practical example因为这是一个非常常见的问题，已经被问了很多次(尽管如果您不知道要搜索什么，但通过搜索并不总是很容易找到)。

对于问题的第二部分，您需要将 this 的值保存在局部变量中，如下所示:

function UpgradeShop(){
    var selectedIndex;

    var category_btns = [];
    var self = this;
    for(var i = 0; i < 5; i++){
        (function(index) {
            category_btns[index] = new Button(38, 68 + i * 75, 284, 70);
            category_btns[index].action = function() {
                selectedIndex = index;
                self.draw_ui();           // use self here
            };
        })(i);
    }

    this.draw_ui = function(){
       ...
    }
}