JavaScript Academy · leksjon

Hvordan closures fanger tilstand

Forstå det leksikalske miljøet til closures.

Leksjon 1 av 413 trinn

Hvordan closures fanger tilstand er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva er en closure

En closure er en funksjon som er pakket sammen med referanser til variablene i scopet der den ble definert. Den indre funksjonen «husker» disse variablene selv etter at den ytre funksjonen har returnert.

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

Returnere den indre funksjonen

Det interessante skjer når De returnerer den indre funksjonen. Den beholder tilgangen til den ytre variabelen selv om outer allerede er ferdig med å kjøre.

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

Leksikalsk skoping

Closures fungerer på grunn av leksikalsk skoping: En funksjon kan få tilgang til variabler som er definert i scopene som fysisk omslutter den i kildekoden, ikke der den kalles.

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

Fange opp med referanse

En closure fanger opp selve variabelen, ikke et øyeblikksbilde av verdien. Hvis variabelen endres senere, ser closuren den nye verdien.

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

Hvert kall oppretter et nytt scope

Hver gang den ytre funksjonen kalles, opprettes et nytt sett med variabler. Closures fra forskjellige kall deler ikke tilstand.

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

Closures over parametere

Funksjonsparametere fanges også opp. Dette lar deg bygge spesialiserte funksjoner fra en generell funksjon.

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

Den klassiske løkkefellen

En berømt feil: Når var brukes i en løkke, deler alle closures én variabel. Når de kjøres, er løkken ferdig, og alle ser den endelige verdien.

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

Løsningen med let

let oppretter en ny binding for hver iterasjon, slik at hver closure fanger opp sin egen i. Dette er den moderne løsningen.

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

Closures holder minnet i live

Så lenge en closure eksisterer, kan variablene den har fanget opp, ikke frigjøres av garbage collection. Dette er vanligvis uproblematisk, men kan føre til minnelekkasjer hvis closures beholdes lenger enn nødvendig.

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

Closures finnes overalt

Tilbakekall, hendelsesbehandlere, setTimeout, array-metoder og promises er alle avhengige av closures for å huske kontekst. De brukes hele tiden, ofte uten at du legger merke til det.

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

Undersøke fanget tilstand

Flere closures fra samme funksjonskall deler de samme variablene de har fanget opp, slik at én kan lese det en annen skriver.

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

Hurtigsjekk

Hvordan closures fanger opp tilstand.

Besvar den i den interaktive leksjonen

Oppsummering

En closure er en funksjon sammen med referanser til scopet der den ble definert. Takket være leksikalsk scoping husker den ytre variabler etter at den ytre funksjonen har returnert, og fanger dem opp via referanse, ikke verdi. Hvert kall til den ytre funksjonen oppretter et uavhengig scope. Bruk let for å unngå løkkefellen. Closures holder fanget minne i live og driver tilbakekall overalt.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hvordan closures fanger tilstand» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Hvordan closures fanger tilstand», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Hvordan closures fanger tilstand»?

Forstå det leksikalske miljøet til closures. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Hvordan closures fanger tilstand»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy