如何将对象属性分配给 XMLHTTPRequest 的结果答案

【问题标题】：How to assign object properties to the result of an XMLHTTP Request如何将对象属性分配给 XMLHTTPRequest 的结果
【发布时间】：2019-08-01 09:14:24
【问题描述】：

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

我尝试过使用 this 关键字，但在这种情况下它不引用黑白棋类。

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
    }

【问题讨论】：

标签： javascript ajax

【解决方案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 时，它指的是回调函数的上下文，而不是父类本身。在您的代码中，它不是指黑白棋，而是在回调之外，this 指的是黑白棋类，所以我将this 的引用复制到变量that，所以现在that 永久具有引用类的，现在我定义了一个名为setOpenings() 的方法，并将它绑定到黑白棋类。所以，在使用that 变量的回调中，我们可以访问Reversi 类的成员，希望你明白了！

【讨论】：