Scope bestemmer tilgængeligheden (synligheden) af variabler.
JavaScript har 3 typer omfang:
Blok omfang
Funktionsomfang
Globalt omfang
Før ES6 (2015) havde JavaScript kun Global Scope og Function Scope.
ES6 introducerede to vigtige nye JavaScript-nøgleord: let og const.
Disse to søgeord giver Block Scope i JavaScript.
Variabler erklæret inde i en { } blok kan ikke tilgås fra uden for blokken:
{
let x = 2;
}
// x can NOT be used hereVariabler, der er erklæret med var nøgleordet, kan IKKE have blokomfang.
Variabler erklæret inde i en { } blok kan tilgås fra udenfor blokken.
{
var x = 2;
}
// x CAN be used hereVariabler, der er erklæret i en JavaScript-funktion, bliver LOKALtil funktionen.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNamePrøv det selv →
<!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>
Lokale variabler har funktionsomfang:
De kan kun tilgås fra funktionen.
Da lokale variabler kun genkendes i deres funktioner, kan variabler med samme navn bruges i forskellige funktioner.
Lokale variabler oprettes, når en funktion starter, og slettes, når funktionen er fuldført.
JavaScript har funktionsomfang: Hver funktion opretter et nyt omfang.
Variabler defineret inde i en funktion er ikke tilgængelige (synlige) udefra fungere.
Variabler erklæret med var, let og const er ret ens, når de erklæres inde i en funktion.
De har alle funktionsomfang:
function myFunction() {
var carName = "Volvo";
// Function Scope
}function myFunction() {
let carName = "Volvo"; //
Function Scope
}function myFunction() {
const carName = "Volvo"; //
Function Scope
}En variabel, der er erklæret uden for en funktion, bliver GLOBAL.
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}Prøv det selv →
<!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>
En global variabel har Globalt omfang:
Alle scripts og funktioner på en webside kan få adgang til den.
Variabler erklæret Globalt (uden for enhver funktion) har Globalt omfang.
Globale variabler kan tilgås fra hvor som helst i et JavaScript-program.
Variabler erklæret med var, let og const er ret ens, når de erklæres uden for en blok.
De har alle globalt omfang:
var x = 2;
// Global scope let x = 2; //
Global scope const x = 2; //
Global scopeI JavaScript er objekter og funktioner også variable.
Omfang bestemmer tilgængeligheden af variabler, objekter og funktioner fra forskellige dele af koden.
Hvis du tildeler en værdi til en variabel, der ikke er blevet erklæret, bliver den automatisk en GLOBAL variabel.
Dette kodeeksempel vil erklære en global variabel carName, selvom værdien tildeles inde i en funktion.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}Prøv det selv →
<!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>
Alle moderne browsere understøtter at køre JavaScript i "Strict Mode".
Du vil lære mere om, hvordan du bruger streng tilstand i et senere kapitel i denne øvelse.
I "Strict Mode" er ikke-erklærede variabler ikke automatisk globale.
Med JavaScript er det globale omfang JavaScript-miljøet.
I HTML er det globale omfang vinduesobjektet.
Globale variable defineret med var nøgleordet tilhører vinduesobjektet:
var carName = "Volvo";
// code here
can use window.carNamePrøv det selv →
<!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>
Globale variabler defineret med let nøgleordet hører ikke til vinduesobjektet:
let carName = "Volvo";
// code here can not use window.carNamePrøv det selv →
<!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>
Opret IKKE globale variabler, medmindre du agter at gøre det.
Dine globale variabler (eller funktioner) kan overskrive vinduesvariabler (eller funktioner).
Enhver funktion, inklusive vinduesobjektet, kan overskrive din globale variabler og funktioner.
Levetiden for en JavaScript-variabel starter, når den er erklæret.
Funktionsvariable (lokale) slettes, når funktionen er fuldført.
I en webbrowser slettes globale variabler, når du lukker browseren vindue (eller fane).
Funktionsargumenter (parametre) fungerer som lokale variabler i funktioner.