使用XMLHttpRequest打字稿衝突「這個」

我一直在使用XMLHttpRequest的與打字稿的問題，這裏是一個打字稿類：使用XMLHttpRequest打字稿衝突「這個」

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}`) 
} 
}

在這種情況下，「這」將參照打字稿類MYCLASS

和使用JavaScript函數'this'將引用請求，我將無法調用我的類方法render（）。

我該如何調用render（）方法並仍然可以訪問響應？

來源

2017-07-25 arkaii

在給定的上下文中，'this'只有一個值。它不能同時指向請求_和_到類。由於您使用雙箭頭函數，所以類上下文被傳遞，因此'this'引用類並且'this.readyState'可能未定義。 –

如果這是一個普通的JS問題，我會把它放在「另一個不恰當的箭頭函數的使用」的問題上，但我不知道TypeScript在那裏是否有所作爲。 – Quentin

您可以使用req變量已經訪問XMLHttpRequest。

如果你喜歡一個更清潔的方式，你可以將請求綁定到你的回調函數精簡版這樣：

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);

用連接功能，您可以將一個固定的this對象分配給一個函數以及其部分或全部參數。

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

來源

2017-07-25 09:37:58 Bellian

不，不要使用'bind'。關閉'this'和'req'的箭頭函數是最清晰的。 – Bergi

在純粹的ES6環境中，這種「綁定」的普遍禁止可能是真實的，但是在混合或prue ES5環境中可能不是這樣。 – Bellian

當然，但即便如此，綁定'req'也是一個壞主意，特別是在混合順序時。此外，OP已經使用箭頭功能很好（無論是否是譯者，無關緊要）。 – Bergi

使用XMLHttpRequest打字稿衝突「這個」

回答

相關問題