JavaScript-muuttujat voivat kuulua paikalliseen tai globaali.
Globaalit muuttujat voidaan tehdä paikallisiksi (yksityisiksi) sulkemisella.
funktio
voi käyttää kaikkia muuttujia, jotka on määritetty funktion sisällä seuraavasti:
function myFunction() {
let a = 4;
return a * a;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can access variables defined inside the function:</p>
<p id="demo"></p>
<script>
myFunction();
function myFunction() {
let a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>
Mutta funktio
voi myös käyttää muuttujia, jotka on määritetty funktion ulkopuolella, esimerkiksi seuraavasti:
let a = 4;
function myFunction() {
return a * a;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can access variables defined outside the function:</p>
<p id="demo"></p>
<script>
let a = 4;
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>
Viimeisessä esimerkissä a on maailmanlaajuinen muuttuja.
Verkkosivulla yleiset muuttujat kuuluvat sivulle.
Kaikki muut sivun skriptit voivat käyttää (ja muuttaa) yleisiä muuttujia.
Ensimmäisessä esimerkissä a on paikallinen muuttuja.
Paikallista muuttujaa voidaan käyttää vain siinä funktiossa, jossa se on määritelty. Se on piilotettu muilta funktioilta ja muulta komentosarjakoodilta.
Maailmanlaajuinen ja paikalliset muuttujat, joilla on sama nimi erilaisia muuttujia. Toisen muokkaaminen ei muuta toista.
Muuttujat, jotka on luotu ilman ilmoitusavainsanaa (var
, let
tai const
) ovat aina globaaleja, vaikka ne olisi luotu funktion sisällä.
function myFunction() {
a = 4;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Variables created without a declaration keyword (var, let, or const) are always global,
even if they are created inside a function.:</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = a * a;
function myFunction() {
a = 4;
}
</script>
</body>
</html>
Yleiset muuttujat ovat voimassa, kunnes sivu hylätään, kuten navigoidessasi toiselle sivulle tai sulje ikkuna.
Paikallinen muuttujilla on lyhyt käyttöikä. Ne luodaan, kun toiminto on kutsutaan ja poistetaan, kun toiminto on valmis.
Oletetaan, että haluat käyttää muuttujaa jonkin laskemiseen ja haluat tämän laskuri on kaikkien toimintojen käytettävissä.
Voit käyttää yleistä muuttujaa ja funktiota
laskurin suurentamiseen:
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function Closures</h2>
<p>Counting with a global variable.</p>
<p id="demo"></p>
<script>
// Initiate counter
let counter = 0;
// Function to increment counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>
</body>
</html>
Yllä olevassa ratkaisussa on ongelma: mikä tahansa sivulla oleva koodi voi muuttaa laskuria ilman kutsuu add().
Laskurin tulee olla paikallinen add()
-funktiolle, jotta muu koodi ei muutu se:
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function Closures</h2>
<p>Counting with a local variable.</p>
<p id="demo"></p>
<script>
// Initiate counter
let counter = 0;
// Function to increment counter
function add() {
let counter = 0;
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The result is not 3 because you mix up the globaland local counter
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>
</body>
</html>
Se ei toiminut, koska näytämme globaalin laskurin paikallisen sijaan laskuri.
Voimme poistaa globaalin laskurin ja päästä paikalliseen laskuriin antamalla funktio palauttaa sen:
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
// Function to increment counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
// Trying to increment the counter
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>
Se ei toiminut, koska nollasimme paikallisen laskurin joka kerta kun soitamme toiminto.
JavaScriptin sisäinen funktio voi ratkaista tämän.
Kaikilla toiminnoilla on pääsy maailmanlaajuiseen laajuuteen.
Itse asiassa JavaScriptissä kaikilla funktioilla on pääsy niiden yläpuolelle.
JavaScript tukee sisäkkäisiä toimintoja. Sisäkkäisillä toiminnoilla on pääsy ulottuvuus niiden "yläpuolella".
Tässä esimerkissä sisäisellä funktiolla plus()
on pääsy pääfunktion laskuri
-muuttujaan:
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function Closures</h2>
<p>Counting with a local variable.</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html>
Tämä olisi voinut ratkaista vastadilemman, jos olisimme saavuttaneet plus()
toimi ulkopuolelta.
Meidän on myös löydettävä tapa suorittaa counter=0
vain kerran.
Tarvitsemme sulkemisen.
Muistatko itsekutsuvat toiminnot? Mitä tämä toiminto tekee?
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>
Muuttuja add
on määritetty itsekutsuvan palautusarvon toiminto.
Itsekutsutoiminto suoritetaan vain kerran. Se asettaa laskurin nollaan (0), ja palauttaa funktiolausekkeen.
Tällä tavalla lisäämisestä tulee toiminto. "Ihana" puoli on, että se pääsee käsiksi ylätason laajuuden laskuri.
Tätä kutsutaan JavaScriptin sulkemiseksi. Se mahdollistaa sen jotta funktiolla on "yksityisiä" muuttujia.
Laskuri on suojattu anonyymin toiminnon avulla, ja sitä voidaan muuttaa vain lisäystoiminnolla.
Sulkeminen on toiminto, jolla on pääsy pääalueeseen, vaikka päätoiminto on suljettu.