PricingLoginStart free
JavaScript Academy · Lektion

Faldgruber ved metodeudtrækning og partial application

Løs problemer med metodeudtrækning ved hjælp af call/apply/bind, og lær små mønstre til partial application med bind og wrapper-pilefunktioner.

Lektion 2 af 38 trin

Faldgruber ved metodeudtrækning og partial application er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 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: Bevar this efter udtrækning, og udfyld argumenter på forhånd.

  • call(thisArg, a, b)
  • apply(thisArg, [a, b])
  • bind(thisArg, a) → returnerer en ny funktion
  • Delvis anvendelse med bind eller en lille pilfunktion
Faldgruber ved metodeudtrækning og partial application — illustration 1

Faldgrube ved udtrækning

Det fungerer at kalde som obj.method(), men når funktionen trækkes ud, mister den objektet og this holder op med at fungere.

// Extraction loses this
const user = {
  name: "Ayla",
  label: function (prefix) {
    return prefix + ":" + this.name;
  }
};

console.log("method call:", user.label("Hi")); // "Hi:Ayla"

// Extract
const f = user.label;
console.log("extracted:", f("Hi")); // this is missing -> "Hi:undefined" (in strict mode this is undefined)
Faldgruber ved metodeudtrækning og partial application — illustration 2

call/apply til enkeltstående kald

call og apply lader dig sætte this for ét enkelt kald.

// Fix by passing this explicitly using call/apply
console.log("call :", f.call(user, "Hi"));   // "Hi:Ayla"
console.log("apply:", f.apply(user, ["Yo"])); // "Yo:Ayla"
Faldgruber ved metodeudtrækning og partial application — illustration 3

bind til genbrug

bind opretter en funktion, der husker this. Kald den mange gange uden at binde den igen.

// bind returns a new function with this fixed
const bound = f.bind(user);
console.log("bound once:", bound("Hey")); // "Hey:Ayla"
console.log("bound again:", bound("Yo")); // "Yo:Ayla"
Faldgruber ved metodeudtrækning og partial application — illustration 4

Delvis anvendelse (enkelt)

Brug bind til at udfylde de første argumenter på forhånd, eller brug en lille pilfunktionsindpakning til at fastlåse værdier og this.

// Partial application: pre-fill arguments
function add(a, b, c) { return a + b + c; }

// Using bind: pre-fill a=10
const add10 = add.bind(null, 10);
console.log("add10(1,2):", add10(1, 2)); // 13

// Using an arrow wrapper: pre-fill prefix
const labelHi = function (obj) {
  return function () { return obj.label("Hi"); };
}(user);

console.log("arrow partial:", labelHi()); // "Hi:Ayla"
Faldgruber ved metodeudtrækning og partial application — illustration 5

Praktiske mønstre

Tip:

  • Udtrukne metoder: brug bind én gang, og genbrug resultatet.
  • Enkeltstående kald: brug call/apply.
  • Har du brug for argumenter, der er udfyldt på forhånd? Brug bind eller en lille pilfunktionsindpakning.
  • Hold hjælpefunktioner små, og giv dem tydelige navne.
Faldgruber ved metodeudtrækning og partial application — illustration 6

Quiz om bind kontra call/apply

Hurtigt tjek: Bevar this, og udfyld argumenter på forhånd.

Faldgruber ved metodeudtrækning og partial application — illustration 7
Besvar den i den interaktive lektion

Opsummering

Opsummering: Udtrækning mister this. Brug call/apply til enkeltstående kald og bind til at fastlåse this og genbruge funktionen. Brug bind eller en lille pilfunktion til at udfylde værdier på forhånd.

Faldgruber ved metodeudtrækning og partial application — illustration 8
Gratis at komme i gang

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
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Faldgruber ved metodeudtrækning og partial application” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Faldgruber ved metodeudtrækning og partial application”, 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 “Faldgruber ved metodeudtrækning og partial application”?

Løs problemer med metodeudtrækning ved hjælp af call/apply/bind, og lær små mønstre til partial application med bind og wrapper-pilefunktioner. 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 2 af 3.

Hvor lang tid tager lektionen “Faldgruber ved metodeudtrækning og partial application”?

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

  1. Lexical kontra dynamisk this — pilefunktioner igen
  2. Faldgruber ved metodeudtrækning og partial application
  3. Funktionelle alternativer — giv kontekst videre, closures og små hjælpere
← Tilbage til JavaScript Academy