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

Question

我已经为此担心了一段时间，但我无法意识到真正发生了什么。代码 cmets 中的解释。一个应用程序有 2 个版本，其中一个会抛出奇怪的结果，而第二个会完成预期的工作。

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 关键字时它的行为会有所不同？大家可以试试here on 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

Answer 2

正如其他人所说，它正在提升。但是为了让您更清楚地了解正在发生的事情，第一个代码实际上是这样执行的：

var id = "test1";

$.post("http://fiddle.jshell.net/echo/json/", {"data": "data"}, function(a) {
     // this is because of hoisting
     var id = undefined;
     alert(id); // will throw undefined

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

Answer 3

这叫吊装。 var id 移动到函数顶部。