javascript - Angular 服务 "this"正在更改窗口对象的上下文

Question

我确信我已经把事情搞砸了，并且遗漏了一些非常明显的东西。目标是提供一种公开一些基本身份验证(登录、注销、isLoggedIn)和潜在授权功能的服务。

当页面加载时，我检查 cookie 并尝试从服务器检索用户(如果 session cookie 指示用户已登录)。我预计不会有很多整页转换，但我认为有 1-2完整页面可能是最好的方法，而且我不想将用户存储在 cookie 中。

我理解服务是通过向 this 对象附加数据/方法来创建的。我在 promise 中了解到 this 上下文发生了变化，为什么在 isLoggedIn 方法中 this 上下文引用了 window 对象？

angular.module('myNgApplication').service('MyAuthentication', function ($cookies, UserProxy) {

    this.user = null ;

    (function(){
        var SESSION_COOKIE = 'loggedIn'
        if($cookies[SESSION_COOKIE]) {
            var self = this
            UserProxy.retrieveSession().then(function(authResponse){
                console.log('init')
                console.log(self)
                self.user = authResponse
            })
        }
    }).call(this)



    this.isLoggedIn = function() {
        console.log('isLoggedIn')
        console.log(this)
        return this.user != null ;
    }

    this.login = function (email, password) {
        var self = this
        return UserProxy.login(email, password).then(function(authResponse){
            self.user = authResponse
            return self.user
        })
    }
})

用法:

var myWelcomeController = function($scope, MyAuthentication, $timeout) {


    $scope.$watch(function(){ return MyAuthentication.user }, function() {
        console.log(MyAuthentication.user)
        $scope.user = MyAuthentication.user ;
        $timeout(MyAuthentication.isLoggedIn, 1000)
    });

};

控制台:

init 
Constructor {user: null, isLoggedIn: function, login: function}

isLoggedIn 
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

Answer 1

$timeout 只是 javascript 的一个微小的 Angular 包装 setTimeout功能及其行为方式类似。

考虑以下示例:

var foo = {
  bar: function(){
    console.log('bar this =', this);
  }
};
foo.bar(); //-> bar this = Object {bar: function}
setTimeout(foo.bar); //-> bar this = Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

当您调用foo.bar()时，JavaScript运行时将函数bar的上下文设置为foo。当您调用 setTimeout(foo.bar) 时，setTimeout 函数仅引用 bar 函数，并在将 this 上下文设置为 Window - 完全如 documentation 中所述.

最后，您可以通过以下更改使代码正常工作:

$timeout(function(){
  MyAuthentication.isLoggedIn()
}, 1000);