Den Unterschied zwischen „call“ und „apply“ in

Arthur Petit

Mittwoch, 3. Juli 2024 um 03:29:15

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, Und 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 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 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, wird äußerst praktisch. Andererseits, 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 und optimieren ihren Code sowohl hinsichtlich Lesbarkeit als auch Leistung.

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

Abschließende Gedanken zu Funktionsaufrufmethoden

Fazit: Beides Und Methoden sind leistungsstarke Werkzeuge in JavaScript zum Aufrufen von Funktionen mit einem bestimmten Wert 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, 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.

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