xmlhttp.onreadystatechange=function的问题

Question

function myCallBack(xmlhttp) {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        console.log(xmlhttp.responseText);
    }
}
function start() {
    var xmlhttp = new XMLHttpRequest();
    var contentDiv = document.getElementById("Content");
    xmlhttp.open("POST", "Demo", true);
    xmlhttp.onreadystatechange=function() {
      myCallBack(xmlhttp);
    };
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    xmlhttp.send("FirstName=Nat&LastName=Dunn");
}

上面的代码为何不可以写成

function myCallBack(xmlhttp) {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        console.log(xmlhttp.responseText);
    }
}
function start() {
    var xmlhttp = new XMLHttpRequest();
    var contentDiv = document.getElementById("Content");
    xmlhttp.open("POST", "Demo", true);
    xmlhttp.onreadystatechange=myCallBack(xmlhttp);
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    xmlhttp.send("FirstName=Nat&LastName=Dunn");
}

两段代码的不同之处

xmlhttp.onreadystatechange=myCallBack(xmlhttp);  

xmlhttp.onreadystatechange=function() {
    myCallBack(xmlhttp);
};     

请解释原因？

Answer 1

xmlhttp.onreadystatechange=myCallBack(xmlhttp);

是把 myCallBack(xmlhttp) 这个函数的执行结果赋值给 xmlhttp.onreadystatechange，实际上 myCallBack(xmlhttp) 返回的是 undefined. 所以上面代码等价于

xmlhttp.onreadystatechange=undefined

而

xmlhttp.onreadystatechange=function() {
    myCallBack(xmlhttp);
};  

这个是把函数赋值给 xmlhttp.onreadystatechange。

Answer 2

xmlhttp.onreadystatechange=myCallBack