如何将对象属性分配给XMLHTTP请求的结果

Question

我正在编写一个Reversi引擎，我希望能够从服务器上的文件中获取开书，然后将其作为数组分配给Reversi类的'openings'属性。目前，我已将其分配给黑白棋对象的“ openings”属性，该属性是黑白棋类的（唯一）实例。但是，我觉得这似乎是一个糟糕的解决方案，必须有更好的解决方案。

我尝试使用this关键字，但在此上下文中它未引用Reversi类。

class Reversi {

    constructor(dims) {
        this.board = new Board(dims)
        this.display = new Display(dims)
        this.gameRunning = true
        this.blackTurn = true
        this.missedTurns = 0
        this.humanPlayers = []
        // this.blackPlayer = document.getElementById("engineSelect").value
        this.blackPlayer = "human"
        this.redPlayer = "human"
        this.aiDelay = 200 //miliseconds
        this.freeTiles = dims**2 - 4
        this.gameHistory = ""
        Object.defineProperty(this, 'openings', {
            configurable: true,
            writable: true,
            value: []
        })
    }

    loadOpenings(callback) {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                callback(this)
                }
            }
        xhttp.open("GET", "books/openings.txt", true)
        xhttp.send()
    }

    callback(xhttp) {
        let openings = xhttp.responseText.split("\n")
        for (let i = 0; i < openings.length; i++) {
            console.log(openings[i])
            openings[i] = openings[i].split(", ")
        }
        reversi.openings = openings
    }

Answer 1

this在回调函数中不起作用，一个想法是创建一个绑定到该类的setter方法，然后在回调中调用它。这将是最终代码：

class Reversi {

constructor(dims) {
    this.board = new Board(dims)
    this.display = new Display(dims)
    this.gameRunning = true
    this.blackTurn = true
    this.missedTurns = 0
    this.humanPlayers = []
    // this.blackPlayer = document.getElementById("engineSelect").value
    this.blackPlayer = "human"
    this.redPlayer = "human"
    this.aiDelay = 200 //miliseconds
    this.freeTiles = dims**2 - 4
    this.gameHistory = ""
    Object.defineProperty(this, 'openings', {
        configurable: true,  
        writable: true,
        value: []
    })
    this.openings = []
}

loadOpenings(callback) {
    //this is very important
    var that = this
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            callback(this, that)
            }
        }
    xhttp.open("GET", "books/openings.txt", true)
    xhttp.send()
}

setOpenings(openings) {
   this.openings = openings;
}

callback(xhttp, that) {
    let openings = xhttp.responseText.split("\n")
    for (let i = 0; i < openings.length; i++) {
        console.log(openings[i])
        openings[i] = openings[i].split(", ")
    }
    //reversi.openings = openings
    that.setOpenings(openings)
}

这听起来很疯狂，但可能有效！ :)这是我所做的：当您在回调中引用this时，它引用的是回调函数的上下文，而不是父类本身。在您的代码中，它不引用Reversi，但在回调之外，this引用Reversi类，因此我将this的引用复制到了变量that，因此现在that永久具有引用在该类的基础上，现在我定义了一个名为setOpenings()的方法，并将其绑定到Reversi类。因此，在使用that变量的回调内部，我们可以访问Reversi类的成员，希望您知道了！