JavaScript Academy · Oppitunti

Miten sulkeumat kaappaavat tilan

Ymmärtäkää sulkeumien leksikaalinen ympäristö.

Oppitunti 1/413 vaihetta

Miten sulkeumat kaappaavat tilan on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on sulkeuma

Sulkeuma on funktio, joka on yhdistetty sen määrittelyalueen muuttujien viittauksiin. Sisempi funktio "muistaa" kyseiset muuttujat, vaikka ulompi funktio olisi jo palauttanut arvon.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Sisemmän funktion palauttaminen

Taika tapahtuu, kun palautatte sisemmän funktion. Se säilyttää pääsyn ulompaan muuttujaan, vaikka outer on jo suorittanut toimintansa loppuun.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Leksikaalinen näkyvyysalue

Sulkeumat toimivat leksikaalisen näkyvyysalueen vuoksi: funktio voi käyttää lähdekoodissa fyysisesti ympäröivillä näkyvyysalueilla määriteltyjä muuttujia, ei sitä ympäröivissä näkyvyysalueissa, joissa sitä kutsutaan.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Viittauksen kaappaaminen

Sulkeuma kaappaa itse muuttujan, ei sen arvon hetkellistä kopiota. Jos muuttuja muuttuu myöhemmin, sulkeuma näkee uuden arvon.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Jokainen kutsu luo uuden näkyvyysalueen

Jokainen ulomman funktion kutsu luo uuden joukon muuttujia. Eri kutsuista peräisin olevat sulkeumat eivät jaa tilaa keskenään.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Parametrien sulkeumat

Myös funktion parametrit kaapataan. Näin yleisestä funktiosta voi muodostaa erikoistuneita funktioita.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

Klassinen silmukkaloukku

Tunnettu virhe: var-muuttujan käyttäminen silmukassa saa kaikki sulkeumat jakamaan saman muuttujan. Kun ne suoritetaan, silmukka on jo päättynyt, joten kaikki näkevät viimeisen arvon.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

Korjaaminen let-avainsanalla

let luo jokaisella iteraatiolla uuden sidonnan, joten kukin sulkeuma kaappaa oman i-muuttujansa. Tämä on nykyaikainen korjaus.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Sulkeumat pitävät muistin varattuna

Niin kauan kuin sulkeuma on olemassa, sen kaappaamaa muistia ei voida vapauttaa roskienkeruulla. Tämä on yleensä ongelmatonta, mutta voi aiheuttaa muistivuotoja, jos sulkeumia säilytetään tarpeettoman pitkään.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Sulkeumia on kaikkialla

Callbackit, tapahtumankäsittelijät, setTimeout, taulukkometodit ja promiset käyttävät kaikki sulkeumia kontekstin muistamiseen. Käytätte niitä jatkuvasti, usein huomaamattanne.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Kaapatun tilan tarkastelu

Saman kutsun useat sulkeumat jakavat samat kaapatut muuttujat, joten yksi niistä voi lukea toisen kirjoittamaa arvoa.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Pikatesti

Miten sulkeumat kaappaavat tilan.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Sulkeuma on funktio ja viittaukset sen määrittävään näkyvyysalueeseen. Leksikaalisen näkyvyysalueen ansiosta sulkeuma muistaa ulommat muuttujat ulomman funktion palautumisen jälkeen ja kaappaa ne viittauksina, ei arvoina. Jokainen ulomman funktion kutsu luo erillisen näkyvyysalueen; käyttäkää let-avainsanaa silmukkaloukun välttämiseksi. Sulkeumat pitävät kaapatun muistin käytössä ja mahdollistavat callbackit kaikkialla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Miten sulkeumat kaappaavat tilan” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Miten sulkeumat kaappaavat tilan”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Miten sulkeumat kaappaavat tilan”?

Ymmärtäkää sulkeumien leksikaalinen ympäristö. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Miten sulkeumat kaappaavat tilan”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy