尽管留在范围内，Javascript 对象仍会丢失状态

Question

我有一个简单的 Javascript 程序，用于在每个项目的指定时间滚动浏览文本项目列表。大多数代码都可以正常工作，但我的对象无法保留状态时遇到了问题。

我有一个 BuildManager 对象，它加载构建(一组指令)，然后重新组装一组时间增量和 DOM 对象。稍后，按钮的点击功能可以引用该对象的实例，从而检查其当前构建。 BuildManager 实例正在构建数组，但当按钮调用的函数运行时，BuildManager 实例表示它的数组长度为零。我知道这是范围问题或类似问题，但我就是找不到位置。在测试期间，我注意到如果我将数组设为全局而不是对象属性，那么它就可以工作，因为全局变量保留了修改。

TLDR:document.ready 函数创建一个名为 manager 的构建管理器，并设置监听器。我单击 #load-build-button，它成功地在管理器中创建了数组(已验证)。后来我点击了#start-build-button，它失败了，因为当它调用 manager.getNextStepStartingTime() 时，管理器 active_build 的长度为 0。

这里是简化为必要的代码:

var BuildManager = function() {
    var current_array = [
        [5, "This is the step with the number: 1"],
        [10, "This is the step with the number: 2"],
        [15, "This is the step with the number: 3"],
        [25, "This is the step with the number: 4"],
        [40, "This is the step with the number: 5"],
        [45, "This is the step with the numberasdfadsfasdfasf: 6"],
        [47, "This is the step with the number: 7"],
        [49, "This is the step with the number: 8"],
        [50, "This is the step with the number: 9"],
        [60, "This is the step with the number: 10"],
        [120, "This is the step with the number: 11"],
        [130, "This is the step with the number: 13"],
        [133, "This is the step with the number: 14"],
        [135, "This is the step with the numbasdfasdfadsfasfder: 15"],
        [137, "This is the step with the number: 16"],
        [139, "This is the step with the number: 17"],
        [145, "This is the step with the number: 18"]
    ];

    this.active_build = [];

    this.loadBuild = function() {
        $(".build-item").remove();
        this.active_build = [];
        for (var i = 0, len = current_array.length; i < len; i++) {
            $(".build-list").append("<div class='build-item'>" + current_array[i][1] + "</div>\n");
            this.active_build.push([current_array[i][0], $(".build-item:contains('"+ current_array[i][1] +"')")]);
        }
    };

    this.getNextStepStartTime = function() {
        return this.active_build[0][0];
    };

    this.getNextStepHeight = function() {
        return this.active_build[0][1].height;
    };

    this.completeStep = function() {
        this.active_build.shift();
    };
};

$(document).ready(function() {
    /* Initialize Jquery items */
    $("input[type=button]").button();

    /* High level data because setInterval doesn't work with objects */
    var total_time_passed = 0;
    var manager = new BuildManager();

    function timerFunction() {
        /* If this isn't the first time here, we've just completed a step, so let the manager know */
        if (total_time_passed > 0) {
            manager.completeStep();
        }

        /* Find out how long until the next step is complete, and animate to it */
        var time_to_next = manager.getNextStepStartTime()-total_time_passed;
        if (time_to_next > 0) {
            var build_list = $(".build-list");
            var prev_pos = parseInt(build_list.css("margin-top"));
            build_list.animate({marginTop: prev_pos - manager.getNextStepHeight()}, time_to_next*1000);
        }

        /* Set this function to run again once the target time has been reached */
        total_time_passed += time_to_next;
        setTimeout(timerFunction, time_to_next*1000);
    }

    function startBuild() {
        timerFunction();
    }

    function stopBuild() {
        //does nothing yet
    }

    /* Setup Click Handlers */
    $("#load-build-button").click(manager.loadBuild);
    $("#start-build-button").click(startBuild);
    $("#stop-build-button").click(stopBuild);
});

Answer 1

manager.loadBuild 是对不包含有关 manager 信息的函数的引用。您需要传递对绑定(bind)到您的范围的函数的引用:

$("#load-build-button").click(manager.loadBuild.bind(manager));

或者，您可以在声明函数时绑定(bind)它们:

this.loadBuild = function() {
    $(".build-item").remove();
    this.active_build = [];
    for (var i = 0, len = current_array.length; i < len; i++) {
        $(".build-list").append("<div class='build-item'>" + current_array[i][1] + "</div>\n");
        this.active_build.push([current_array[i][0], $(".build-item:contains('"+ current_array[i][1] +"')")]);
    }
}.bind(this); // bound!