A hatókör határozza meg a változók elérhetőségét (láthatóságát).
A JavaScript 3 típusú hatókörrel rendelkezik:
Hatókör blokkolása
Funkció hatóköre
Globális hatókör
Az ES6 (2015) előtt a JavaScriptnek csak Globális hatóköre és Funkcióköre volt.
Az ES6 két fontos új JavaScript-kulcsszót vezetett be: let és const.
Ez a két kulcsszó biztosítja a Block Scope-t a JavaScriptben.
A { } blokkon belül deklarált változókhoz nem lehet hozzáférni a blokkon kívülről:
{
let x = 2;
}
// x can NOT be used hereA var kulcsszóval deklarált változóknak NEM lehet blokk hatóköre.
A { } blokkon belül deklarált változók innen érhetők el blokkon kívül.
{
var x = 2;
}
// x CAN be used hereA JavaScript-függvényen belül deklarált változók lesz HELYIre a funkció.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNamePróbálja ki Ön is →
<!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>
A helyi változók Funkciókörrel rendelkeznek:
Csak a funkción belül érhetők el.
Mivel a lokális változókat csak a függvényeiken belül ismeri fel a rendszer, az azonos nevű változók különböző függvényekben használhatók.
A helyi változók a függvény indításakor jönnek létre, és a függvény befejezésekor törlődnek.
A JavaScript funkció hatókörrel rendelkezik: Minden függvény új hatókört hoz létre.
A függvényen belül meghatározott változók nem érhetők el (láthatók) a függvényen kívülről funkció.
A var, let paraméterekkel deklarált változók és const nagyon hasonló, ha egy függvényen belül deklaráljuk.
Mindegyikük rendelkezik Funkciókörrel:
function myFunction() {
var carName = "Volvo";
// Function Scope
}function myFunction() {
let carName = "Volvo"; //
Function Scope
}function myFunction() {
const carName = "Volvo"; //
Function Scope
}A függvényen kívül deklarált változó GLOBÁLIS lesz.
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}Próbálja ki Ön is →
<!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>
Egy globális változó Globális hatóköre:
A weboldalon található összes szkript és funkció hozzáférhet hozzá.
A Globálisan (bármely függvényen kívül) deklarált változók rendelkeznek Globális hatókör.
A globális változók bárhonnan elérhetők egy JavaScript-programban.
A var, let paraméterekkel deklarált változók és const elég hasonló, ha blokkon kívül deklaráljuk.
Mindegyik rendelkezik globális hatókörrel:
var x = 2;
// Global scope let x = 2; //
Global scope const x = 2; //
Global scopeA JavaScriptben az objektumok és a függvények is változók.
A hatókör határozza meg a változók, objektumok és függvények elérhetőségét a kód különböző részei.
Ha értéket rendel egy olyan változóhoz, amely nincs deklarálva, az automatikusan GLOBÁLIS változó lesz.
Ez a kódpélda egy globális carName változót deklarál, még akkor is, ha az érték egy függvényen belül van hozzárendelve.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}Próbálja ki Ön is →
<!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>
Minden modern böngésző támogatja a JavaScript "Strict Mode" futtatását.
Az oktatóanyag egy későbbi fejezetében többet megtudhat a szigorú mód használatáról.
A "szigorú módban" a nem deklarált változók nem automatikusan globálisak.
A JavaScript esetében a globális hatókör a JavaScript környezet.
A HTML-ben a globális hatókör az ablak objektum.
A var kulcsszóval meghatározott globális változók az ablak objektumhoz tartoznak:
var carName = "Volvo";
// code here
can use window.carNamePróbálja ki Ön is →
<!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>
A let kulcsszóval meghatározott globális változók nem tartoznak az ablak objektumhoz:
let carName = "Volvo";
// code here can not use window.carNamePróbálja ki Ön is →
<!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>
NE hozzon létre globális változókat, hacsak nem szándékozik.
Globális változói (vagy függvényei) felülírhatják az ablakváltozókat (vagy functions).
Bármelyik függvény, beleértve az ablakobjektumot is, felülírhatja a globális változók és függvények.
A JavaScript-változó élettartama akkor kezdődik, amikor deklarálják.
A függvény (helyi) változók törlődnek, amikor a funkció befejeződött.
Egy webböngészőben a globális változók törlődnek a böngésző bezárásakor ablak (vagy fül).
A függvény argumentumai (paraméterei) helyi változóként működnek a függvényeken belül.