javascript - 从嵌套函数访问函数属性

Question

这个问题已经有答案了:

Pass correct "this" context to setTimeout callback? (6 个回答)

已关闭 8 年前。

我在从嵌套函数访问函数属性时遇到问题。我确信我错过了一些东西，但经过 3 个小时的 Google 搜索，我只是不知道该寻找什么。背景:我想向 angularjs 添加一个 Controller ，在一定时间后重新加载页面。我的问题是从“this.reloadTicker()”到“this.enabled”的访问。重命名 Controller 函数然后访问它们的想法行不通。一种解决方案是将所有内容存储在“$scope”中，但是有更好的解决方案吗？

我的代码:

ctrls.controller("reloaderCtrl", function reloader($scope) {
    this.enabled = true;
    this.paused = false;
    this.maxSecs = 30;
    this.secs = 30;
    this.reloadTicker = function() {
        if (reloader.enabled && !reloader.paused) {
            if (reloader.secs > 0) {
                reloader.secs--;
            } else {
                reloader.reload();
                reloader.secs = reloader.maxSecs;
            }
            $scope.$apply();
        }
        setTimeout(this, 1000);
    }
    this.reload = function() {
        $scope.$emit('doReload');
    }
    setTimeout(this.reloadTicker, 1000);
});

Answer 1

您需要在某个变量中捕获this:

ctrls.controller("reloaderCtrl", function ($scope) {
    var vm = this;
    vm.enabled = true;
    vm.paused = false;
    vm.maxSecs = 30;
    vm.secs = 30;

    vm.reloadTicker = function() {
        if (vm.enabled && !vm.paused) {
            if (vm.secs > 0) {
                vm.secs--;
            } else {
                vm.reload();
                vm.secs = vm.maxSecs;
            }
            $scope.$apply();
        }
        setTimeout(this, 1000);
    }
    vm.reload = function() {
        $scope.$emit('doReload');
    }
    setTimeout(vm.reloadTicker, 1000);
});

PS。我建议使用 Angular $timeout 而不是 setTimeout ( https://docs.angularjs.org/api/ng/service/ $timeout)

PSS。我建议阅读 John Papa 的《Angular Style Guide》。这绝对是一本好书( https://github.com/johnpapa/angular-styleguide)