JavaScript: pozor na globální proměnné top a další

Při tvorbě jednoho projektu jsem se chvíli zaseknul na práci s JavaScriptem, kdy mi některé proměnné neobsahovaly správné hodnoty. Nejdříve jsem myslel, že se do nich přiřazuje nesprávná hodnota. Nakonec jsem ale zjistil, že se jedná o problém s globálností.

Při definování proměnných v javascriptu totiž můžete narazit na globální proměnné, které prohlížeč automaticky sám nastavuje. A to je například případ zrovna proměnné top. Pokud proměnnou definujete mimo funkci s použitím var, pak ji bez var nastavujete a nakonec chcete vypsat, tak se nedostáváte ke "své" proměnné, ale k proměnné od prohlížeče.

var top = 2;
test();
test2();
test3();

function test() {
 top = 3;
 alert(top); // vypíše [object Window]
}
function test2() {
 alert(top); // vypíše [object Window]
}
function test3() {
 var top = 2;
 alert(top); // vypíše 2
}

Pro použití v nějaké funkci je řešením definování pomocí var a v případě požadavku na globální proměnnou je potřeba použít jiný název proměnné. Do problémů se pak můžete dostat i s jinými názvy - je tedy lepší se vyhnout anglických názvům, které by mohly mít souvislost s prohlížečem.

Více si o tom můžete přečíst na následujících stránkách:

• Stack Overflow - jQuery $(this).position().top not working in Chrome^EN
• Nifty Snippets - The Horror of Implicit Globals^EN
• JavaScript Development - Setting style.top doesn't work in Chrome or Opera^EN