Omfattning bestämmer tillgängligheten (synligheten) för variabler.
JavaScript har tre typer av omfång:
Block omfattning
Funktionsomfång
Globalt omfång
Före ES6 (2015) hade JavaScript bara Global Scope och Function Scope.
ES6 introducerade två viktiga nya JavaScript-sökord: let och const.
Dessa två sökord ger Block Scope i JavaScript.
Variabler som deklareras i ett { }-block kan inte kommas åt från utanför blocket:
{
let x = 2;
}
// x can NOT be used hereVariabler som deklareras med nyckelordet var kan INTE ha blockomfattning.
Variabler som deklareras i ett { }-block kan nås från utanför blocket.
{
var x = 2;
}
// x CAN be used hereVariabler som deklareras i en JavaScript-funktion blir LOKAL till funktionen.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNameProva själv →
<!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>
Lokala variabler har funktionsomfattning:
De kan endast nås från funktionen.
Eftersom lokala variabler bara känns igen i deras funktioner, kan variabler med samma namn användas i olika funktioner.
Lokala variabler skapas när en funktion startar och raderas när funktionen är klar.
JavaScript har funktionsomfång: Varje funktion skapar ett nytt omfång.
Variabler som definieras inuti en funktion är inte tillgängliga (synliga) utifrån fungera.
Variabler deklarerade med var, let och const är ganska lika när de deklareras i en funktion.
De har alla funktionsomfång:
function myFunction() {
var carName = "Volvo";
// Function Scope
}function myFunction() {
let carName = "Volvo"; //
Function Scope
}function myFunction() {
const carName = "Volvo"; //
Function Scope
}En variabel som deklareras utanför en funktion blir GLOBAL.
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}Prova själv →
<!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 Global Scope:
Alla skript och funktioner på en webbsida kan komma åt den.
Variabler som deklareras Globalt (utanför alla funktioner) har Globalt omfattning.
Globala variabler kan nås var som helst i ett JavaScript-program.
Variabler deklarerade med var, let och const är ganska lika när de deklareras utanför ett block.
De har alla Global Scope:
var x = 2;
// Global scope let x = 2; //
Global scope const x = 2; //
Global scopeI JavaScript är objekt och funktioner också variabler.
Omfattning bestämmer tillgängligheten för variabler, objekt och funktioner från olika delar av koden.
Om du tilldelar ett värde till en variabel som inte har deklarerats, blir den automatiskt en GLOBAL variabel.
Detta kodexempel kommer att deklarera en global variabel carName, även om värdet tilldelas inuti en funktion.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}Prova själv →
<!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>
Alla moderna webbläsare stöder körning av JavaScript i "Strikt läge".
Du kommer att lära dig mer om hur du använder strikt läge i ett senare kapitel i denna handledning.
I "Strikt läge" är odeklarerade variabler inte automatiskt globala.
Med JavaScript är det globala omfattningen JavaScript-miljön.
I HTML är det globala omfånget fönsterobjektet.
Globala variabler som definieras med nyckelordet var tillhör fönsterobjektet:
var carName = "Volvo";
// code here
can use window.carNameProva själv →
<!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>
Globala variabler definierade med nyckelordet let tillhör inte fönsterobjektet:
let carName = "Volvo";
// code here can not use window.carNameProva själv →
<!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>
Skapa INTE globala variabler om du inte har för avsikt att göra det.
Dina globala variabler (eller funktioner) kan skriva över fönstervariabler (eller funktioner).
Alla funktioner, inklusive fönsterobjektet, kan skriva över din globala variabler och funktioner.
Livslängden för en JavaScript-variabel börjar när den deklareras.
Funktionsvariabler (lokala) tas bort när funktionen är klar.
I en webbläsare tas globala variabler bort när du stänger webbläsaren fönster (eller flik).
Funktionsargument (parametrar) fungerar som lokala variabler i funktioner.