Lexical kontra dynamisk this — pilefunktioner igen
Se, hvordan dynamisk this afhænger af kaldestedet, og hvordan pilefunktioner indfanger et leksikalsk this; brug små, tydelige eksempler.
Lexical kontra dynamisk this — pilefunktioner igen er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 3 lektioner i alt.
Det store billede
Mål: Forstå, hvad this peger på, og hvornår.
- Dynamisk this: bestemmes af kaldestedet
- this i pilefunktioner: hentes leksikalsk
- Almindelig faldgrube: udtræk af en metode mister this
- Brug pilefunktioner til at bevare this i callbacks
Demo af dynamisk this
Dynamisk this: et kald som obj.method() sætter this = obj; når funktionen trækkes ud, mister den objektet.
// Dynamic this depends on HOW we call the function
const person = {
name: "Ayla",
say: function () {
return "Hi " + this.name;
}
};
console.log("method call:", person.say()); // "Hi Ayla"
// Extract then call: this is lost
const talk = person.say;
console.log("extracted call:", talk()); // likely "Hi undefined" in strict mode -> this is undefined
Pilfunktioner = leksikalsk this
En pilfunktion henter this fra den omgivende funktions eller objekts omfang, når den oprettes; den ændrer det ikke ved kaldet.
// Arrow functions capture this from where they are created
const box = {
label: "blue",
showLater: function () {
// Arrow keeps this === box
const fn = () => "box:" + this.label;
return fn();
}
};
console.log("arrow captured this:", box.showLater()); // "box:blue"
Callbacks: Bevar this med pilefunktioner
I callbacks mister en normal funktion ofte this; en pilfunktion bevarer det ydre this.
// Using a normal function in a callback can lose this
const widget = {
id: 7,
normal: function () {
setTimeout(function () {
// here this is not widget in many environments
console.log("normal cb this.id:", this && this.id);
}, 0);
},
arrow: function () {
setTimeout(() => {
// arrow keeps lexical this from arrow()
console.log("arrow cb this.id:", this.id);
}, 0);
}
};
widget.normal();
widget.arrow();
En enkel løsning ved udtrækning
Hvis en metode trækkes ud, så pak den ind i en lille pilfunktion, der bevarer en reference til objektet, eller bind den (i næste lektion). Hold det enkelt for begyndere.
// If you must extract, wrap with an arrow capturing the object
const account = {
owner: "Mila",
label: function () { return "Owner:" + this.owner; }
};
// Lost this:
const lost = account.label;
console.log("lost:", lost()); // "Owner:undefined" (this missing)
// Fixed: create an arrow that closes over account
const safe = () => account.label();
console.log("fixed via arrow wrapper:", safe());
Gode vaner
Tip:
- Metoder: kald dem med obj.method(), så this er objektet.
- Callbacks: foretræk pilefunktioner for at bevare et leksikalsk this.
- Udtrukne metoder mister this; pak dem ind i en pilfunktion, eller bind dem.
Quiz om pilfunktioners this
Hurtigt tjek: Sådan fungerer this i pilfunktioner.
Opsummering
Opsummering: this er dynamisk i normale funktioner (sættes af kaldestedet) og leksikalsk i pilefunktioner (hentes der, hvor de oprettes). Brug pilefunktioner i callbacks, og pak udtrukne metoder ind for at holde adfærden enkel.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Lexical kontra dynamisk this — pilefunktioner igen” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Lexical kontra dynamisk this — pilefunktioner igen”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Lexical kontra dynamisk this — pilefunktioner igen”?
Se, hvordan dynamisk this afhænger af kaldestedet, og hvordan pilefunktioner indfanger et leksikalsk this; brug små, tydelige eksempler. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 3.
Hvor lang tid tager lektionen “Lexical kontra dynamisk this — pilefunktioner igen”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Lexical kontra dynamisk this — pilefunktioner igen
- Faldgruber ved metodeudtrækning og partial application
- Funktionelle alternativer — giv kontekst videre, closures og små hjælpere