javascript - 聚合物 firebase..使用密码和电子邮件进行身份验证

Question

我有一个可以成功登录用户的函数。

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;

   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(function() {
      // Sign-in successful.
      //this._animateView(); **returns undefined**
    }, function(error) {
      // An error happened.
    //     // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        // this._animateErrorView(); **returns undefined**
    });

  },

我想要的是当用户成功登录时调用函数 this._animateView(); ，并在出现错误时调用函数 this._animateErrorView() 。

如果我尝试这样做，它会返回未定义..我该如何解决这个问题

Answer 1

回调函数中this的含义不同。

您可以通过多种方式解决此问题，但这里有两种。

在另一个变量中捕获 this 的值

您无法阻止 this 获取新值，因为这就是 JavaScript 闭包的工作原理。但是您可以做的是使用您需要的值定义一个不同的值。该变量的惯用名称是 self，尽管我个人更喜欢更具描述性的名称:

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;
   var self = this;    
   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(function() {
        self._animateView();
    }, function(error) {
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        self._animateErrorView();
    });
  }

使用粗箭头函数

ES6 定义了一种使用所谓的“粗箭头”(=>) 声明函数的新方法。除了代码稍微少一些之外，这些还确保 lambda/callback 中的 this 值保持不变。所以

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;
   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(() => {
        this._animateView();
    }, (error) => {
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        this._animateErrorView();
    });
  }