javascript - 为什么 "this"in function inside angularjs service be undefined

Question

为什么这个内部函数在 angularjs 服务中未定义？

.service('SliceService', function () {
    var self = this;

    var Slice = function(intervals, intervalSpan) {
        self.activeSlice = [];
        self.hasNext = true;
        self.hasPrevious = false;
        self.intervals = intervals;
        self.intervalSpan = intervalSpan;
    }

    Slice.prototype.findIntervalIndex = function (time, slice) {
        slice = slice || self.intervals;
        return _.findIndex(slice, function (o) {
            return o.time === time;
        });
    };

    return Slice;

})

.controller('myController', ['SliceService', function(SliceService) {
    SliceService([arr], 12);
    SliceService.findINtervalIndex(time);
}])

在上面的示例中，当在 Controller 中使用它时，this.activeSlice 抛出错误 TypeError: Cannot set property 'activeSlice' of undefined。

-

更新

谢谢大家!我更新了我的示例以更好地反射(reflect)我正在尝试做的事情。通过上面的代码，我得到了一个 TypeError: SliceService.findIntervalIndex is not a function — 也许服务不适合我正在尝试做的事情？

Answer 1

在匿名范围内访问之前尝试保存“this”的值:

(function(){
    'use strict';

    angular.module('myServices').service('SliceService', function () {
        var context = this;

        var Slice = function(intervals, intervalSpan) {
            context.activeSlice = [];
            context.hasNext = true;
            context.hasPrevious = false;
            context.intervals = intervals;
            context.intervalSpan = intervalSpan;
        }

        return Slice;
    });
}());

使用绑定(bind):

    angular.module('myServices').service('SliceService', function () {
        var Slice = function(intervals, intervalSpan) {
            this.activeSlice = [];
            this.hasNext = true;
            this.hasPrevious = false;
            this.intervals = intervals;
            this.intervalSpan = intervalSpan;
        }.bind(this);

        return Slice;
    });

注意:使用 javascript ES6 的箭头函数确保 this 始终指向相同的上下文。所以你可以用箭头函数替换常规函数。然而，如果不进行转译，这不会得到普遍支持。

service('SliceService', ()=>{ 
 // operations
}