Rozsah JavaScriptu

Obsah

    Zobrazit obsah

Rozsah určuje dostupnost (viditelnost) proměnných.

JavaScript má 3 typy rozsahu:

  • Rozsah bloku

  • Rozsah funkcí

  • Globální rozsah

Rozsah bloku

Před ES6 (2015) měl JavaScript pouze Globální rozsah a Rozsah funkcí.

ES6 zavedl dvě důležitá nová klíčová slova JavaScript: let a const.

Tato dvě klíčová slova poskytují v JavaScriptu Rozsah bloku.

K proměnným deklarovaným uvnitř bloku { } nelze přistupovat mimo blok:

Příklad

{ 
  let x = 2;
  }
// x can NOT be used here

Proměnné deklarované pomocí klíčového slova var NEMOHOU mít rozsah bloku.

K proměnným deklarovaným uvnitř bloku { } lze přistupovat z mimo blok.

Příklad

{ 
  var x = 2; 
  }
// x CAN be used here

Místní rozsah

Proměnné deklarované v rámci funkce JavaScriptu se stanou MÍSTNÍk funkce.

Příklad

// code here can NOT use carName
function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}
  
// code here can NOT use carName

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p><b>carName</b> is undefined outside myFunction():</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
  let carName = "Volvo";
  document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML = typeof carName;
</script>

</body>
</html>

Místní proměnné mají Rozsah funkce:

Lze k nim přistupovat pouze z funkce.

Protože lokální proměnné jsou rozpoznávány pouze uvnitř jejich funkcí, lze proměnné se stejným názvem použít v různých funkcích.

Lokální proměnné se vytvářejí při spuštění funkce a vymažou se po dokončení funkce.

Rozsah funkce

JavaScript má rozsah funkcí: Každá funkce vytváří nový rozsah.

Proměnné definované uvnitř funkce nejsou přístupné (viditelné) zvenčí funkce.

Proměnné deklarované pomocí var, let a const jsou docela podobné, když je deklarováno uvnitř funkce.

Všechny mají Rozsah funkcí:

function myFunction() {
    var carName = "Volvo";   
  // Function Scope
}
function myFunction() {
    let carName = "Volvo";   // 
  Function Scope
}
function myFunction() {
    const carName = "Volvo";   // 
  Function Scope
}

Globální proměnné JavaScriptu

Proměnná deklarovaná mimo funkci se stává GLOBÁLNÍ.

Příklad

let carName = "Volvo";
// code here can use carName

function myFunction() {
// code here can also use carName 
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p>A GLOBAL variable can be accessed from any script or function.</p>

<p id="demo"></p>

<script>
let carName = "Volvo";
myFunction();

function myFunction() {
  document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>

</body>
</html>

Globální proměnná má Globální rozsah:

Všechny skripty a funkce na webové stránce k ní mají přístup.

Globální rozsah

Proměnné deklarované globálně (mimo jakoukoli funkci) mají Globální rozsah.

Globální proměnné jsou přístupné odkudkoli v programu JavaScript.

Proměnné deklarované pomocí var, let a const jsou docela podobné, když je deklarováno mimo blok.

Všechny mají globální rozsah:

var x = 2;       
  // Global scope
 let x = 2;       // 
  Global scope
 const x = 2;       // 
  Global scope

Proměnné JavaScriptu

V JavaScriptu jsou objekty a funkce také proměnné.

Rozsah určuje dostupnost proměnných, objektů a funkcí různé části kódu.

Automaticky globální

Pokud proměnné přiřadíte hodnotu, která nebyla deklarována, automaticky se stane proměnnou GLOBAL.

Tento příklad kódu bude deklarovat globální proměnnou carName, i když hodnota je přiřazena uvnitř funkce.

Příklad

myFunction();
// code here can use carName
 
function myFunction() {
    carName = "Volvo";
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Variables</h2>
<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>

<p id="demo"></p>

<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;

function myFunction() {
  carName = "Volvo";
}
</script>

</body>
</html>

Přísný režim

Všechny moderní prohlížeče podporují spouštění JavaScriptu v „přísném režimu“.

Více o tom, jak používat přísný režim, se dozvíte v pozdější kapitole tohoto tutoriálu.

V "Strict Mode" nejsou nedeklarované proměnné automaticky globální.

Globální proměnné v HTML

U JavaScriptu je globálním rozsahem prostředí JavaScriptu.

V HTML je globálním rozsahem objekt okna.

Globální proměnné definované pomocí klíčového slova var patří do objektu okna:

Příklad

var carName = "Volvo";
// code here 
 can use window.carName

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";

// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

</body>
</html>

Globální proměnné definované pomocí klíčového slova let nepatří do objektu okna:

Příklad

let carName = "Volvo";
// code here can not use window.carName

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Variables</h2>

<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>

<p id="demo"></p>

<script>
let carName = "Volvo";

// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>

</body>
</html>

Varování

NEVYTVOŘUJTE globální proměnné, pokud to nemáte v úmyslu.

Vaše globální proměnné (nebo funkce) mohou přepsat proměnné okna (nebo funkcí).
Kterákoli funkce, včetně objektu okna, může přepsat vaše globální proměnné a funkce.

Životnost proměnných JavaScriptu

Životnost proměnné JavaScriptu začíná, když je deklarována.

Funkční (lokální) proměnné jsou po dokončení funkce vymazány.

Ve webovém prohlížeči se globální proměnné odstraní, když prohlížeč zavřete okno (nebo karta).

Funkční argumenty

Argumenty funkce (parametry) fungují jako lokální proměnné uvnitř funkcí.