Förstå skillnaden mellan ringa och ansöka i JavaScript

Arthur Petit

Onsdag 3 juli 2024 04:16:13

Funktionsanropsmetoder i JavaScript

JavaScript erbjuder flera sätt att anropa funktioner, varav två är `Function.prototype.call()` och `Function.prototype.apply()`. Båda metoderna tjänar till att anropa funktioner med ett specificerat "detta" värde och argument, men de skiljer sig åt i hur dessa argument skickas.

Den här artikeln syftar till att undersöka skillnaderna mellan "samtal" och "apply", deras prestandaimplikationer och scenarier där det ena kan föredras framför det andra. I slutet kommer du att ha en tydligare förståelse för när du ska använda "ringa" eller "ansöka" i din JavaScript-kod.

Utforska skillnaderna mellan "ringa" och "ansöka" i JavaScript

JavaScript-gränssnittsexempel

// 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

Förstå prestanda för "samtal" kontra "apply" i JavaScript

JavaScript-gränssnittsexempel

// 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

Jämför "call" och "apply" för funktionsanrop i JavaScript

Exempel på Node.js Backend

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älj mellan "ringa" och "ansöka" i JavaScript-utveckling

JavaScript prestandaanalys

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');

Djupare insikt i samtal och tillämpa metoder i JavaScript

Förutom deras grundläggande användning, Function.prototype.call() och Function.prototype.apply() har flera avancerade användningsfall som kan förbättra din JavaScript-programmering. Ett sådant användningsfall är metodlån, där metoder från ett objekt lånas av ett annat. Detta är särskilt användbart när du har ett objekt som behöver använda en metod från ett annat objekt utan arv. Använder sig av call() och apply(), kan du tillfälligt låna metoder och exekvera dem i sammanhang med olika objekt, vilket förbättrar kodåteranvändbarhet och minskar redundans.

En annan viktig aspekt att tänka på är användningen av apply() för variadiska funktioner – funktioner som accepterar ett variabelt antal argument. När du har en array av argument och du behöver skicka dem till en funktion som inte accepterar en array, apply() blir extremt behändig. Å andra sidan, call() kan vara användbart i scenarier där prestandan är kritisk och antalet argument är känt och fixat. Genom att förstå dessa nyanser kan utvecklare fatta mer välgrundade beslut om när de ska användas call() mot apply(), optimerar sin kod för både läsbarhet och prestanda.

Vanliga frågor om att ringa och ansöka i JavaScript

Vad är den primära skillnaden mellan call() och apply()?
call() accepterar argument individuellt, medan apply() accepterar argument som en array.
Burk call() och apply() användas omväxlande?
Ja, de kan uppnå samma resultat, men valet beror på hur argumenten är uppbyggda.
När ska jag föredra apply() över call()?
Använda sig av apply() när du har en uppsättning argument eller ett variabelt antal argument.
Finns det någon prestandaskillnad mellan call() och apply()?
Prestandaskillnaderna är försumbara i de flesta fall, men call() kan vara något snabbare med ett fast antal argument.
Hur gör call() och apply() hantera this sammanhang?
Båda metoderna ställer uttryckligen in this sammanhang för funktionsanropet.
Kan jag använda call() och apply() med konstruktorfunktioner?
Nej, de är inte lämpliga för konstruktorfunktioner eftersom de inte skapar nya instanser.
Vad är några avancerade användningsfall för call() och apply()?
De är användbara för metodlån och hantering av olika funktioner.
Hur gör call() förbättra kodläsbarheten?
call() gör funktionsanropet tydligare när antalet argument är känt och fixerat.
Burk apply() hantera ett okänt antal argument?
Ja, apply() är idealisk för funktioner som behöver hantera ett varierande antal argument.

Slutliga tankar om funktionsanropsmetoder

Sammanfattningsvis båda call och apply metoder är kraftfulla verktyg i JavaScript för att anropa funktioner med en specificerad this värde. Valet mellan dem beror till stor del på hur du vill skicka argument till funktionen. Medan call är bäst när man hanterar ett fast antal argument, apply lyser vid hantering av arrayer eller ett okänt antal argument. Att förstå dessa nyanser hjälper till att skriva mer effektiv och läsbar kod, vilket i slutändan leder till bättre JavaScript-programmeringsmetoder.

Förstå skillnaden mellan "ringa" och "ansöka" i JavaScript