javascript - Javascript OOP-在异步回调中丢失了它

我遇到的问题仍然困扰着我，js oop-我确定我做得不好，但是我无法正确地做到这一点。

例如，我有此代码

Auth.prototype.auth = function () {
    var request = new XMLHttpRequest();

    request.open('GET', this.getAuthServerURL() + '/token', true);
    request.send();

    request.onloadend = function () {
      var response = JSON.parse(request.responseText);

      console.log(response);
      if(response.result == 'found') {
        var token = response.token;

        this.setToken(token);
        this.isSigned = true;
      } else {
        console.log('Not logged yet.');
      }
    }
}

问题是我无法从“request.onloadend”函数的上下文访问函数setToken-这可能是因为我丢失了对“this”的引用。

这个问题有什么解决方案？我可以以某种方式将“this”变量传递给此函数的上下文吗？

谢谢!

最佳答案

有两种方法可以做到这一点。最直接的是简单地保存所需值的副本:

Auth.prototype.auth = function () {
    var request = new XMLHttpRequest();
    var self = this; // save "this" value

    request.open('GET', this.getAuthServerURL() + '/token', true);
    request.send();

    request.onloadend = function () {
      var response = JSON.parse(request.responseText);

      console.log(response);
      if(response.result == 'found') {
        var token = response.token;

        self.setToken(token); // use saved "this" value
        self.isSigned = true;
      } else {
        console.log('Not logged yet.');
      }
    }
}

另一种方法是使用 bind :

request.onloadend = (function () {
  var response = JSON.parse(request.responseText);

  console.log(response);
  if(response.result == 'found') {
    var token = response.token;

    this.setToken(token); // use saved "this" value
    this.isSigned = true;
  } else {
    console.log('Not logged yet.');
  }
}).bind(this);

第二种方法是“更清洁”，但是它具有浏览器兼容性问题(IE