javascript - XMLHttpRequest 与 Typescript 的 'this' 冲突

我在使用 TypeScript 的 XMLHttpRequest 时遇到问题，这是一个 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() 方法并仍然能够访问响应？

答案＃1

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

如果你更喜欢一种更简洁的方式，你可以像这样将请求绑定到你的回调函数 lite 上：

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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind