javascript - 如何将范围保持在 XHR 请求内？

Question

所以我正在构建一个 Javascript 路由器并构建如下所示的路由:

route('/user/{name}', 'page', function() {
    this.text = 'User: ' + this.name;
});

该函数的范围是当前路由，因此我可以在这里操作当前路由(this.text 是 View 正在寻找的内容)。

现在我的下一步是在路由中包含 XHR 请求，如下所示:

route('/user/{name}', 'page', function() {
    this.text = 'Loading';

    var request = new XMLHttpRequest();
    request.open('GET', '/api/user', true);

    request.onreadystatechange = (function() {
        if (this.readyState === 4) {
            if (this.status >= 200 && this.status < 400) {
                var data = JSON.parse(this.responseText);
                // here is the issue: 'this' now refers to
                // the XHR request and not the scope of the router
                this.age = data.age;
                this.gender = data.gender;
            } else {
                this.text = "Error";
            }
        }
    })/* .bind(this); */ // keeping scope like this overwrites the XHR

    request.send();
    request = null;
});

这里的问题是我需要访问 XHR 范围和我的路由器范围。在 onreadystatechange 末尾使用 .bind 会覆盖 XHR 范围，而不设置它会覆盖路由器的范围。

那怎么办？有没有比 var that = this; 更简洁的东西——肯定有办法吗？

Answer 1

最简单(也是非常清晰的方法)是保留对路由范围的引用，如下所示:

var that = this;

您还可以使用 .bind() 设置范围，并直接从 reqest 变量访问请求属性。

对于您的示例(使用 bind 辅助函数，以支持旧浏览器):

var bind = function(fn, context) {
    return function() {
        fn.apply(context, arguments);
    };
};

request.onreadystatechange = bind(function() {
  if (request.readyState === 4) {
    if (request.status >= 200 && request.status < 400) {
      var data = JSON.parse(request.responseText);
      this.age = data.age;
      this.gender = data.gender;
    } else {
      this.text = "Error";
    }
  }
}, this);