Den Unterschied zwischen „call“ und „apply“ in JavaScript verstehen

Den Unterschied zwischen „call“ und „apply“ in JavaScript verstehen
JavaScript

Funktionsaufrufmethoden in JavaScript

JavaScript bietet mehrere Möglichkeiten zum Aufrufen von Funktionen, zwei davon sind „Function.prototype.call()“ und „Function.prototype.apply()“. Beide Methoden dienen dazu, Funktionen mit einem angegebenen „this“-Wert und Argumenten aufzurufen, unterscheiden sich jedoch in der Art und Weise, wie diese Argumente übergeben werden.

Ziel dieses Artikels ist es, die Unterschiede zwischen „call“ und „apply“, ihre Auswirkungen auf die Leistung und Szenarien zu untersuchen, in denen das eine dem anderen vorgezogen werden könnte. Am Ende werden Sie besser verstehen, wann Sie „call“ oder „apply“ in Ihrem JavaScript-Code verwenden sollten.

Erkunden der Unterschiede zwischen „call“ und „apply“ in JavaScript

Beispiel für ein JavaScript-Frontend

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

Verstehen der Leistung von „call“ vs. „apply“ in JavaScript

Beispiel für ein JavaScript-Frontend

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

Vergleich von „call“ und „apply“ für den Funktionsaufruf in JavaScript

Node.js-Backend-Beispiel

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

Auswahl zwischen „call“ und „apply“ in der JavaScript-Entwicklung

JavaScript-Leistungsanalyse

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

Tieferer Einblick in Aufruf- und Anwendungsmethoden in JavaScript

Zusätzlich zu ihrer grundlegenden Verwendung, Function.prototype.call() Und Function.prototype.apply() verfügen über mehrere erweiterte Anwendungsfälle, die Ihre JavaScript-Programmierung verbessern können. Ein solcher Anwendungsfall ist das Ausleihen von Methoden, bei dem Methoden von einem Objekt von einem anderen ausgeliehen werden. Dies ist besonders nützlich, wenn Sie ein Objekt haben, das eine Methode von einem anderen Objekt ohne Vererbung verwenden muss. Benutzen call() Und apply()können Sie Methoden vorübergehend ausleihen und im Kontext verschiedener Objekte ausführen, wodurch die Wiederverwendbarkeit des Codes verbessert und die Redundanz verringert wird.

Ein weiterer wichtiger Aspekt, den es zu berücksichtigen gilt, ist die Verwendung von apply() für variadische Funktionen – Funktionen, die eine variable Anzahl von Argumenten akzeptieren. Wenn Sie über ein Array von Argumenten verfügen und diese an eine Funktion übergeben müssen, die kein Array akzeptiert, apply() wird äußerst praktisch. Andererseits, call() kann in Szenarien nützlich sein, in denen die Leistung von entscheidender Bedeutung ist und die Anzahl der Argumente bekannt und festgelegt ist. Durch das Verständnis dieser Nuancen können Entwickler fundiertere Entscheidungen darüber treffen, wann sie verwendet werden sollen call() gegen apply()und optimieren ihren Code sowohl hinsichtlich Lesbarkeit als auch Leistung.

Häufig gestellte Fragen zum Aufrufen und Bewerben in JavaScript

  1. Was ist der Hauptunterschied zwischen call() Und apply()?
  2. call() akzeptiert Argumente einzeln, während apply() akzeptiert Argumente als Array.
  3. Kann call() Und apply() austauschbar verwendet werden?
  4. Ja, sie können das gleiche Ergebnis erzielen, aber die Wahl hängt davon ab, wie die Argumente strukturiert sind.
  5. Wann sollte ich bevorzugen apply() über call()?
  6. Verwenden apply() wenn Sie ein Array von Argumenten oder eine variable Anzahl von Argumenten haben.
  7. Gibt es einen Leistungsunterschied zwischen? call() Und apply()?
  8. Leistungsunterschiede sind in den meisten Fällen jedoch vernachlässigbar call() kann mit einer festen Anzahl von Argumenten etwas schneller sein.
  9. Wie macht call() Und apply() Behandeln Sie die this Kontext?
  10. Beide Methoden legen explizit fest this Kontext für den Funktionsaufruf.
  11. Kann ich benutzen call() Und apply() mit Konstruktorfunktionen?
  12. Nein, sie sind nicht für Konstruktorfunktionen geeignet, da sie keine neuen Instanzen erstellen.
  13. Wozu dienen einige fortgeschrittene Anwendungsfälle? call() Und apply()?
  14. Sie sind nützlich für das Ausleihen von Methoden und die Handhabung verschiedener Funktionen.
  15. Wie funktioniert call() Code-Lesbarkeit verbessern?
  16. call() macht den Funktionsaufruf klarer, wenn die Anzahl der Argumente bekannt und festgelegt ist.
  17. Kann apply() eine unbekannte Anzahl von Argumenten verarbeiten?
  18. Ja, apply() ist ideal für Funktionen, die eine variable Anzahl von Argumenten verarbeiten müssen.

Abschließende Gedanken zu Funktionsaufrufmethoden

Fazit: Beides call Und apply Methoden sind leistungsstarke Werkzeuge in JavaScript zum Aufrufen von Funktionen mit einem bestimmten Wert this Wert. Die Wahl zwischen ihnen hängt weitgehend davon ab, wie Sie Argumente an die Funktion übergeben möchten. Während call ist am besten, wenn es mit einer festen Anzahl von Argumenten zu tun hat, apply leuchtet beim Umgang mit Arrays oder einer unbekannten Anzahl von Argumenten. Das Verständnis dieser Nuancen hilft dabei, effizienteren und lesbareren Code zu schreiben, was letztendlich zu besseren JavaScript-Programmierpraktiken führt.