Javascript ES6&x2B；Angular Controller类，在回调中未定义该类

考虑下面的类

class LoginController{
    constructor(authService,$timeout,$state){
        let vm = this;
        this.loading = false;
        this._authService = authService;
        this._$timeout = $timeout;
        this._$state = $state;
        this.loading = false;
        this.statusMessage = null;
    }

    login(){
        this.loading = true;
        this.statusMessage = null;

        let loginModel = {
            UserName : this.username,
            Password : this.password,
            RememberMe : this.rememberMe
        };

        //Login User
        this._authService.login(loginModel).then(function(user){
            //Set User Login & send to Dashboard
            this._authService.setUser(user);
            this._$state.go("dashboard");

        }, function(error){
            const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
            this.loading = false;
        });
    }
}

一切都很正常，除了我点击了错误回调函数，它进入了

this.load=false由于某些原因，这是未定义的

如何在错误回调中保留对类“this”的引用？
必须使用fat箭头来保留范围

//Login User
this._authService.login(loginModel).then((user) => {
    //Set User Login & send to Dashboard
    this._authService.setUser(user);
    this._$state.go("dashboard");
}, (error) => {
    const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
    this.loading = false;
});

你必须使用粗箭头来保持范围

//Login User
this._authService.login(loginModel).then((user) => {
    //Set User Login & send to Dashboard
    this._authService.setUser(user);
    this._$state.go("dashboard");
}, (error) => {
    const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
    this.loading = false;
});

函数中的this是另一个作用域，因此它引用函数而不是父函数

解决方案

将其定义为自我：

class LoginController{
    constructor(authService,$timeout,$state){
        let vm = this;
        this.loading = false;
        this._authService = authService;
        this._$timeout = $timeout;
        this._$state = $state;
        this.loading = false;
        this.statusMessage = null;
    }

    login(){
        var self = this; //Define this as self

        this.loading = true;
        this.statusMessage = null;

        let loginModel = {
            UserName : this.username,
            Password : this.password,
            RememberMe : this.rememberMe
        };

        //Login User
        this._authService.login(loginModel).then(function(user){
            //Set User Login & send to Dashboard
            self._authService.setUser(user);
            self._$state.go("dashboard");

        }, function(error){
            const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
            self.loading = false; //Self refers to this of parent scope
        });
    }
}

函数中的this是另一个作用域，因此它引用函数而不是父函数

解决方案

将其定义为自我：

class LoginController{
    constructor(authService,$timeout,$state){
        let vm = this;
        this.loading = false;
        this._authService = authService;
        this._$timeout = $timeout;
        this._$state = $state;
        this.loading = false;
        this.statusMessage = null;
    }

    login(){
        var self = this; //Define this as self

        this.loading = true;
        this.statusMessage = null;

        let loginModel = {
            UserName : this.username,
            Password : this.password,
            RememberMe : this.rememberMe
        };

        //Login User
        this._authService.login(loginModel).then(function(user){
            //Set User Login & send to Dashboard
            self._authService.setUser(user);
            self._$state.go("dashboard");

        }, function(error){
            const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
            self.loading = false; //Self refers to this of parent scope
        });
    }
}

将上下文传递给回调函数是一个非常常见的问题。一般的答案是声明如下内容

var self=this在要保留“this”的上下文中
然后在回调函数中这样引用它

函数回调（）{
self.myvariable=true；
};

在您的特定情况下，您已经声明
让vm=this
所以你可以用
vm.\u authService.setUser（用户）；
vm.$state.go（“仪表板”）
将上下文传递给回调函数是一个非常常见的问题。一般的答案是声明如下内容

var self=this在要保留“this”的上下文中
然后在回调函数中这样引用它

函数回调（）{
self.myvariable=true；
};

在您的特定情况下，您已经声明
让vm=this
所以你可以用
vm.\u authService.setUser（用户）；
vm.$state.go（“仪表板”）
如果fat箭头指向ES6中的新内容？我过去常常将父范围的这个定义为self或那个。真的吗？很抱歉，我对ES6了解不多，但是如果我使用
=>
我在回调中有相同的
实例this
？真的strange@seahorsepip是的，我爱他们。它们取代了self/me/vm/function（）{}.bind（这个）代码。@gianlucatursi这并不奇怪，这是ES6的一个很棒的特性：）（他们从C#那里借用了这个想法）@nielsteenbeek很棒！非常感谢你！这是一个好主意（抄袭）：“如果胖箭头在ES6中有什么新东西？”？我过去常常将父范围的这个定义为self或那个。真的吗？很抱歉，我对ES6了解不多，但是如果我使用
=>
我在回调中有相同的
实例this
？真的strange@seahorsepip是的，我爱他们。它们取代了self/me/vm/function（）{}.bind（这个）代码。@gianlucatursi这并不奇怪，这是ES6的一个很棒的特性：）（他们从C#那里借用了这个想法）@nielsteenbeek很棒！非常感谢你！这是一个好主意（复制）：（1）ES6胖箭头解决了难看的self/me/vm变量。2） 你的代码在then中仍然失败。我的坏代码修复了then。太糟糕了，我还不能在我的项目中使用ES6，需要支持IE:'（你可以使用babel polyfill来支持IE中的Promise。同样，许多移动设备不支持一些新的ecmascript功能，cordova、browserfy等=sNice也不支持，我会研究一下！尽管我正在编写的一些jQuery插件仍然最好用ES5编写，因为polyfill会在文件大小上再增加一些kB，我尽量将其保持在最小值。）项目。如果不增加太多额外的文件大小，也许我将来会转移到ES6并将其编译到ES5。1）ES6胖箭头解决了难看的self/me/vm变量。2）您的代码在then中仍然失败。My bad修复了then。太糟糕了，我还不能在我的项目中使用ES6，需要支持IE:'（你可以使用babel polyfill来支持IE中的Promise。同样，许多移动设备不支持一些新的ecmascript功能，cordova、browserfy等=sNice也不支持，我会研究一下！尽管我正在编写的一些jQuery插件仍然最好用ES5编写，因为polyfill会在文件大小上再增加一些kB，我尽量将其保持在最小值。）项目。如果不增加太多额外的文件大小，也许我将来会转移到ES6并将其编译到ES5。正如Niels所说，您可以使用ecmascript 6中的=>箭头来维护范围，这是合理的，因为您使用的是“let”关键字，它需要相同版本的ecmascript。正如Niels所说，您可以使用ecmascript 6中的=>箭头来维护范围，这是合理的，因为您使用的是“let”关键字，它需要相同版本的ecmascript。您已经解决了问题还是需要更多帮助？您已经解决了问题还是需要更多帮助？