Forstå forskellen mellem opkald og anvend i JavaScript

Arthur Petit

Onsdag den 3. juli 2024 kl. 03.22.03

Funktionsankaldelsesmetoder i JavaScript

JavaScript tilbyder flere måder at aktivere funktioner på, hvoraf to er `Function.prototype.call()` og `Function.prototype.apply()`. Begge metoder tjener til at kalde funktioner med en specificeret `denne` værdi og argumenter, men de adskiller sig i, hvordan disse argumenter sendes.

Denne artikel har til formål at udforske forskellene mellem "opkald" og "anvend", deres præstationsimplikationer og scenarier, hvor det ene kan foretrækkes frem for det andet. Til sidst vil du have en klarere forståelse af, hvornår du skal bruge "ring" eller "anvend" i din JavaScript-kode.

Udforskning af forskellene mellem 'ringe' og 'anvend' i JavaScript

JavaScript frontend eksempel

// Example of Function.prototype.call()
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const person1 = {
  firstName: "John",
  lastName: "Doe"
};

console.log(person.fullName.call(person1)); // John Doe

Forstå effektiviteten af "opkald" vs "anvend" i JavaScript

JavaScript frontend eksempel

// Example of Function.prototype.apply()
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person2 = {
  firstName: "Jane",
  lastName: "Doe"
};

console.log(person.fullName.apply(person2, ["Oslo", "Norway"])); // Jane Doe, Oslo, Norway

Sammenligning af "opkald" og "søg" om funktionsopkald i JavaScript

Node.js Backend-eksempel

const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person3 = {
  firstName: "Alice",
  lastName: "Smith"
};

function printName(method) {
  if (method === 'call') {
    console.log(person.fullName.call(person3, 'Paris', 'France'));
  } else if (method === 'apply') {
    console.log(person.fullName.apply(person3, ['Paris', 'France']));
  }
}

printName('call');  // Alice Smith, Paris, France
printName('apply'); // Alice Smith, Paris, France

Vælg mellem "ring" og "anvend" i JavaScript-udvikling

JavaScript-ydelsesanalyse

const iterations = 1000000;
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};
const person4 = {
  firstName: "Bob",
  lastName: "Brown"
};

console.time('call');
for (let i = 0; i < iterations; i++) {
  person.fullName.call(person4, 'Berlin', 'Germany');
}
console.timeEnd('call');

console.time('apply');
for (let i = 0; i < iterations; i++) {
  person.fullName.apply(person4, ['Berlin', 'Germany']);
}
console.timeEnd('apply');

Dybere indsigt i kalde og anvende metoder i JavaScript

Ud over deres grundlæggende brug, Function.prototype.call() og Function.prototype.apply() har flere avancerede use cases, der kan forbedre din JavaScript-programmering. En sådan use case er metodelån, hvor metoder fra et objekt er lånt af et andet. Dette er især nyttigt, når du har et objekt, der skal bruge en metode fra et andet objekt uden arv. Ved brug af call() og apply(), kan du midlertidigt låne metoder og udføre dem i sammenhæng med forskellige objekter, og derved forbedre kodegenanvendelighed og reducere redundans.

Et andet vigtigt aspekt at overveje er brugen af apply() for variadiske funktioner – funktioner, der accepterer et variabelt antal argumenter. Når du har en række argumenter, og du skal overføre dem til en funktion, der ikke accepterer en matrix, apply() bliver yderst praktisk. På den anden side, call() kan være nyttig i scenarier, hvor ydeevnen er kritisk, og antallet af argumenter er kendt og fast. Ved at forstå disse nuancer kan udviklere træffe mere informerede beslutninger om, hvornår de skal bruges call() imod apply(), der optimerer deres kode til både læsbarhed og ydeevne.

Ofte stillede spørgsmål om opkald og ansøg i JavaScript

Hvad er den primære forskel mellem call() og apply()?
call() accepterer argumenter individuelt, mens apply() accepterer argumenter som en matrix.
Kan call() og apply() bruges i flæng?
Ja, de kan opnå det samme resultat, men valget afhænger af, hvordan argumenterne er opbygget.
Hvornår skal jeg foretrække apply() over call()?
Brug apply() når du har en række argumenter eller et variabelt antal argumenter.
Er der en præstationsforskel mellem call() og apply()?
Ydelsesforskelle er ubetydelige i de fleste tilfælde, men call() kan være lidt hurtigere med et fast antal argumenter.
Hvordan call() og apply() håndtere this sammenhæng?
Begge metoder indstiller eksplicit this kontekst for funktionsindkaldelsen.
Kan jeg bruge call() og apply() med konstruktørfunktioner?
Nej, de er ikke egnede til konstruktørfunktioner, da de ikke opretter nye forekomster.
Hvad er nogle avancerede use cases til call() og apply()?
De er nyttige til metodelån og håndtering af variadiske funktioner.
Hvordan gør call() forbedre kodelæsbarheden?
call() gør funktionskaldet tydeligere, når antallet af argumenter er kendt og fast.
Kan apply() håndtere et ukendt antal argumenter?
Ja, apply() er ideel til funktioner, der skal håndtere et variabelt antal argumenter.

Afsluttende tanker om funktionsankaldelsesmetoder

Afslutningsvis begge dele call og apply metoder er kraftfulde værktøjer i JavaScript til at påkalde funktioner med en specificeret this værdi. Valget mellem dem afhænger i høj grad af, hvordan du vil videregive argumenter til funktionen. Mens call er bedst, når man har at gøre med et fast antal argumenter, apply lyser ved håndtering af arrays eller et ukendt antal argumenter. At forstå disse nuancer hjælper med at skrive mere effektiv og læsbar kode, hvilket i sidste ende fører til bedre JavaScript-programmeringspraksis.

Forstå forskellen mellem "opkald" og "anvend" i JavaScript