javascript - XMLHttpRequest Typescript 与 'this' 冲突

Question

我在使用 XMLHttpRequest 和 typescript 时遇到问题，这里是一个 typescript 类:

class Myclass {
 constructor() {
   this.init();
 }

 private init() {
  const req = new XMLHttpRequest();
  req.onreadystatechange = ( event: Event ): any => {
   if (this.readyState === XMLHttpRequest.DONE) {
    if (this.status === 200) {
      this.render(this.responseText)
    }
   }
  };

  req.open('GET', '/api/test', true);
  req.send(null);
 };

private render( data:any ) {
  console.log(`use ${data}`)
 }
}

在这种情况下，“this”将引用 typescript 类 Myclass并且使用 javascript 函数“this”将引用该请求，并且我将无法调用我的类方法 render()。

如何调用 render() 方法并仍然可以访问响应？

Answer 1

您已经可以使用 req 变量访问 XMLHttpRequest。

如果您喜欢更简洁的方式，您可以将请求绑定(bind)到您的回调函数精简版，这样:

req.onreadystatechange = (function ( request: XMLHttpRequest, event: Event ): any {
    if (request.readyState === XMLHttpRequest.DONE) {
        if (request.status === 200) {
            this.render(request.responseText)
        }
    }
}).bind(this, req);

或者反过来使用:

req.onreadystatechange = (function ( myClassObject: MyClass, event: Event ): any {
    if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
            myClassObject.render(this.responseText)
        }
    }
}).bind(req, this);

使用绑定(bind)函数，您可以将固定的 this 对象分配给函数及其部分或全部参数。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind