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

Question

我已经为此担心了一段时间，但我不明白到底发生了什么。代码注释中的解释。一个应用程序有 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 解释得和任何人一样好：

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.

下面来自 MDN link 的代码示例：

bla = 2
var bla;
// ...

// is implicitly understood as:

var bla;
bla = 2;

您可以看到这将如何导致 "weird behaviour":

alert(testId);
var testId = 2;

相当于：

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

这让我想到了我可以传授的最后一点知识，总是在你的代码块的顶部声明你的变量，所以这个 "weird behaviour" 被编码到你的程序（再也不会让你失望）：

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 移至函数顶部。

Answer 3

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

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
});

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

Very weird behavior when using "var" keyword in an ajax request

javascript

variables

ajax

var