使用 'this' 的 JavaScript 对象

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 7 年前。

我的部分代码

var tablo = {
    tablo_id: 0,
    retrivedData: 1234,
    getData: function() {
      var xhr;
      var data = "aranan=" + document.getElementById('aranan').value;

      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            this.retrivedData = JSON.parse(xhr.responseText);
            console.log(this.retrivedData); //first
          }
        }

        xhr.open("POST", "listele.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
      },

      setData: function() {
        console.log(this.retrivedData); //Second  
      }
    }
}
function u() {
  tablo.getData();
  tablo.setData();
}

当我运行函数 u() 时，第一个 console.log 工作，但第二个不起作用，第二个仅返回 1234 。我在按钮 onclick 事件中使用函数 u()

Answer 1

这是因为，您正在发送异步 AJAX 请求，在 javascript 中默认情况下所有 ajax 请求都是异步的。异步请求不会等待响应，它会发送 AJAX 请求并继续调用(这确实是一个功能)，因为在服务器响应的同时，您可以在 javascript 上执行其他代码

所以你的实际执行顺序是function getData() -> 发送请求 -> function setData() -> console.log("second") -> 接收响应 -> console.log("first")

您可以尝试下面的代码，让我知道它是否解决了您的问题

var tablo = {
    tablo_id: 0,
    retrivedData: 1234,
    getData: function() {
      var xhr;
      var data = "aranan=" + document.getElementById('aranan').value;
      var that = this;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            that.retrivedData = JSON.parse(xhr.responseText);
            console.log("First :",that.retrivedData); //first
            that.setData();
          }

        }

        xhr.open("POST", "listele.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);

      },

      setData: function() {
          console.log("Second :",this.retrivedData); //Second  
        },

    }
}

function u() {
  tablo.getData();
  //tablo.setData();
}