Bardzo dziwne zachowanie przy użyciu słowa kluczowego "var" w żądaniu ajaxowym

Question

Martwię się o to od jakiegoś czasu i nie mogę zrozumieć, co się naprawdę dzieje. Wyjaśnienie w komentarzach do kodu. Istnieją dwie wersje aplikacji, jedna z nich rzuca dziwne wyniki, a druga wykonuje oczekiwaną pracę.

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

Nie jestem pewien, czy to ma coś wspólnego z wywołania ajax lub anonimowej funkcji, ale jest to po prostu sposób odkryłem to, więc lepiej trzymać go tam. Czy ktoś mógłby wyjaśnić, czego mi brakuje? Dlaczego zachowuje się inaczej, gdy anuluję słowo kluczowe var? Możesz wypróbować wszystko, co trzeba: here on jsFiddle

Answer 1

Fajnie, odkryłeś hoisting. MDN wyjaśnia to tak dobre, jak każdy:

Ponieważ deklaracje zmiennych (i oświadczenia w ogóle) są przetwarzane przed każdy kod jest wykonywany, deklarując zmienną nigdzie w kodzie jest równoznaczne z deklarując go na górze. Oznacza to także, że zmienna może wydawać się użyta przed jej zadeklarowaniem. To zachowanie jest nazywane "podnoszeniem", ponieważ wydaje się, że deklaracja zmiennej zostanie przeniesiona na szczyt funkcji lub kod globalny.

przykładowy kod z MDN link poniżej:

bla = 2 
var bla; 
// ... 

// is implicitly understood as: 

var bla; 
bla = 2; 

Można zobaczyć, jak to będzie skutkowało w "dziwne zachowanie":

alert(testId); 
var testId = 2; 

odpowiada:

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

Co prowadzi mnie do ostatniej wiedzy, którą mogę przekazać, zawsze deklarować zmienne w górnej części bloków kodu, więc to „dziwne zachowanie” jest kodowana do swoich programów (i nigdy nie rzuca cię znowu):

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

Nazywa wyciągowych. var id zostaje przeniesiony na początek funkcji.

Answer 3

Tak jak mówili inni, jest to podnoszenie. Ale tak więc można mieć jaśniejszy obraz tego, co się dzieje, pierwszy kod jest faktycznie wykonywana tak:

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