在ajax请求中使用"var"关键字时非常奇怪的行为

Question

我一直在担心这一点,我无法意识到真正发生了什么.代码注释中的说明.有两个版本的应用程序,其中一个抛出奇怪的结果,第二个执行预期的工作.

var id = "test1";

$.post("http://fiddle.jshell.net/echo/json/", {"data": "data"}, function(a) {
     alert(id); // will throw undefined

     var id = "test2";
     alert(id); // will throw "test2" as expected
});

---

$.post("http://fiddle.jshell.net/echo/json/", {"data": "data"}, function(a) {
    alert(id); // will throw "test1" as expected

    id = "test2";
    alert(id); // will throw "test2" as expected
});

我不确定它是否与ajax调用或匿名函数有关,但这只是我发现它的方式所以我最好保留它.有人可以解释我错过了什么吗？当我省略var关键字时,为什么它的行为会有所不同？您可以在jsFiddle上尝试所有内容

Answer 1

很酷,你发现了hoisting.MDN解释说它和任何人一样好:

因为在执行任何代码之前处理变量声明(以及一般的声明),所以在代码中的任何地方声明变量等同于在顶部声明它.这也意味着变量可以在声明之前使用.此行为称为"提升",因为看起来变量声明被移动到函数或全局代码的顶部.

以下MDN链接的代码示例:

bla = 2
var bla;
// ...

// is implicitly understood as:

var bla;
bla = 2;

你可以看到这将导致"奇怪的行为":

alert(testId);
var testId = 2;

相当于:

var testId;
alert(testId);
testId = 2;

这让我了解了我可以传授的最后一点知识,总是在你的代码块的顶部声明你的变量,所以这个"奇怪的行为"被编码到你的程序中(并且永远不会再抛弃你):

function someFunction() {
   var
    firstVar,
    secondVar,
    thirdVar;

    //rest of your code statements here
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting