JS问题：调用this.create()时this.setDate()无法执行，单独调用正常

嘿，作为JS新手遇到这个问题真的太正常了——这是典型的**this指向变化**导致的问题，我来给你拆解清楚：

问题根源 #

在$.post的回调函数内部，this的指向已经不再是你原来的对象（也就是调用this.create()的那个对象）了！它现在指向的是回调函数的执行上下文（通常是window对象，或者jQuery内部的上下文）。而this.runMapping()能正常运行，是因为它在回调函数外面，此时this还是你原来的对象。

三种解决方案 #

方案1：提前保存this到变量（最兼容，新手首选） #

在$.post调用之前，把当前的this存到一个变量里（比如that或者self），然后在回调里用这个变量来调用方法：

修改后的this.create()代码：

this.create = function() { 
  var validate = this.validate(); 
  if (validate === false) { 
    return; 
  } else if (document.getElementById("nameID").value == "") { 
    alert("Enter an ID"); 
  } else { 
    this.runMapping(); 
    // 保存当前的this到变量that
    var that = this;
    $.post('http://*************', { }, function(data) { 
      var results = $.parseJSON(data); 
      if (results.status == "fail") { 
        alert('FAILED'); 
      } else { 
        ID = (results.data[0].nameID); 
        alert("SUCCESS"); 
        // 用that代替this调用方法
        that.setDate(); 
      } 
    }); 
  } 
}

方案2：使用ES6箭头函数 #

箭头函数不会创建自己的this，它会继承外部作用域的this指向，直接把回调改成箭头函数即可：

this.create = function() { 
  var validate = this.validate(); 
  if (validate === false) { 
    return; 
  } else if (document.getElementById("nameID").value == "") { 
    alert("Enter an ID"); 
  } else { 
    this.runMapping(); 
    $.post('http://*************', { }, (data) => { // 箭头函数
      var results = $.parseJSON(data); 
      if (results.status == "fail") { 
        alert('FAILED'); 
      } else { 
        ID = (results.data[0].nameID); 
        alert("SUCCESS"); 
        this.setDate(); // 这里的this还是原来的对象
      } 
    }); 
  } 
}

方案3：用bind()绑定上下文 #

给回调函数绑定当前的this，强制让它的this指向原来的对象：

this.create = function() { 
  var validate = this.validate(); 
  if (validate === false) { 
    return; 
  } else if (document.getElementById("nameID").value == "") { 
    alert("Enter an ID"); 
  } else { 
    this.runMapping(); 
    $.post('http://*************', { }, function(data) { 
      var results = $.parseJSON(data); 
      if (results.status == "fail") { 
        alert('FAILED'); 
      } else { 
        ID = (results.data[0].nameID); 
        alert("SUCCESS"); 
        this.setDate(); 
      } 
    }.bind(this)); // 绑定当前的this
  } 
}

验证修改 #

不管用哪种方案，修改后再运行代码，你应该能看到alert("In date")正常弹出，说明this.setDate()已经被正确调用啦！

内容的提问来源于stack exchange，提问作者Nicholas