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, och 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 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 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, blir extremt behändig. Å andra sidan, 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 , optimerar sin kod för både läsbarhet och prestanda.

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

Slutliga tankar om funktionsanropsmetoder

Sammanfattningsvis båda och metoder är kraftfulla verktyg i JavaScript för att anropa funktioner med en specificerad 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, 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