javascript - 使用 Javascript 对象进行 Angular 服务

Question

我正在尝试向 JS 对象添加函数，该对象将用作单例服务。

angular
        .module('app.steps')
        .factory('createStepsService', createStepsService);

    createStepsService.$inject = [];

    /* @ngInject */
    function createStepsService() {
        var steps;

        var service = {
            newSteps: function (current_step, total_steps) {
                if (!steps) {                   
                    return new Steps(current_step, total_steps);
                }
            }            
        };
        return service;

        function Steps(current_step, total_steps) {
            this.c_step = current_step;
            this.t_step = total_steps;            
        }

        Steps.prototype = {
            addSteps: function (num) {
                this.c_step += num;
            },
            setLastStep: function () {
                this.lastStep = this.c_step = this.t_step;
            }
        };        
    }

当我从 Controller 运行此行时，我无法访问addSteps/setLastStep 方法。

vm.createStepsService = createStepsService.newSteps(1, 3);

为什么我看不到这些方法？它们是被创造的吗？

谢谢。

Answer 1

您的steps.prototype代码从未运行过。

这是因为它出现在返回之后。

将代码的顺序更改为:

/* @ngInject */
function createStepsService() {
    var steps;

    function Steps(current_step, total_steps) {
        this.c_step = current_step;
        this.t_step = total_steps;            
    }

    Steps.prototype = {
        addSteps: function (num) {
            this.c_step += num;
        },
        setLastStep: function () {
            this.lastStep = this.c_step = this.t_step;
        }
    };

    var service = {
        newSteps: function (current_step, total_steps) {
            if (!steps) {                   
                return new Steps(current_step, total_steps);
            }
        }            
    };       

    return service; 
}

您可以在返回之前声明函数的原因是 JavaScript variable and function hoisting .