apply vs. call von Methoden in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. apply vs. call von Methoden in …
Muhammad Muzammil Hussain 12 Oktober 2023
JavaScript JavaScript Method JavaScript Apply JavaScript Call
  1. Die call()-Methode in JavaScript
  2. Die apply()-Methode in JavaScript
  3. Das Methodenbeispiel call() in JavaScript
  4. Alternativer Weg durch Verwendung der apply()-Methode
apply vs. call von Methoden in JavaScript

Dieser Artikel erklärt, wie man die Methoden call() und apply() in JavaScript verwendet. Der Unterschied zwischen beiden Funktionen wird anhand einiger einfacher Beispiele erklärt.

Lassen Sie uns einen Blick auf die folgenden Methoden und ihre Funktionsweise werfen.

Die call()-Methode in JavaScript

Die Methode call() nimmt das Eigentümerobjekt als Argument an. Das Schlüsselwort this bezieht sich auf den Besitzer der Funktion oder des Objekts, zu dem sie gehört.

Wir können auch eine Methode aufrufen, um sie für verschiedene Objekte zu verwenden. Dadurch können wir die Methoden mit durch Kommas getrennten Argumenten aufrufen.

Syntax der Methode call() in JavaScript

abc_object.object_method.call(object_instance, arguments, ...)

Wie oben erwähnt, akzeptiert die Methode call() zwei Parameter, die wir im Folgenden beschreiben werden.

  • Im ersten Parameter enthält object_instance die Instanz eines Objekts.
  • Kommagetrennte Argumente stehen im zweiten Parameter.

Die apply()-Methode in JavaScript

apply() wird verwendet, um auf ein anderes Objekt zu schreiben. Es nimmt die Werte in Form eines Arrays an.

Syntax der Methode apply() in JavaScript

abc_object.object_method.apply(object_instance, [arguments_array...])

Die Methode apply() akzeptiert zwei Parameter wie oben gezeigt.

  • Im ersten Parameter enthält object_instance die Instanz eines Objekts.
  • Im zweiten Parameter sind die Argumente in Form eines Arrays.

Das Methodenbeispiel call() in JavaScript

Wir werden eine einfache Schaltfläche Zum Anzeigen klicken erstellen, die eine Funktion beim Klickereignis auslöst.

Die Funktion verwendet die Methode call(), und wir zeigen ein kombiniertes Textergebnis mit Objekten an, die mehrere Zeichenkettenwerte als Schlüssel-Wert-Paare enthalten. Es kombiniert einfach Strings des angegebenen Objekts, indem es einen Parameter mit der Methode call() übergibt.

Das Ergebnis wird als Absatz angezeigt.

<!DOCTYPE html>  
<html>
    <head>
        <title>
call() method Example
</title>
    </head>
    <body style = "text-align:center;">
        <h1 >  
            Click on "Click to display" for display combined Text using call()
        </h1>
        <button onClick="fun()">
          Click to display
        </button>  
        <p id="mypara"></p>  
        <!-- Script tags to use call() method to call
            function -->
        <script>
            function fun() {
              let object_b = {
                combinedText: function(text1, text2) {
                  return this.firstName + " " + this.lastName 
                        + " " + text1 + " " + text2;
                }
              }   
              let object_a = {
                firstName:"DelftStack",
                lastName: "Technology",
              }
              let x = object_b.combinedText.call(object_a, "is", "Best"); 
              document.getElementById("mypara").innerHTML = x;
              }
        </script> 
    </body>
</html>

In der obigen HTML-Seitenquelle sehen Sie eine einfache Schaltfläche Click to display, die die Funktion fun() aufruft.

In fun() wird body mit einer anderen combinedText-Methode in object_b initialisiert. Es gibt eine verkettete Zeichenfolge übergebener Parameter zurück.

Ein weiteres initialisiertes Objekt object_a, das mehrere Strings als Schlüsselwert enthält, mit call()-Parametern (object_a,"is","best"). Beide werden im String verkettet und geben das Ergebnis zurück.

Das Ergebnis wird durch getElementById() angezeigt.

Alternativer Weg durch Verwendung der apply()-Methode

Die gleichen Ergebnisse sind mit der apply()-Methode erreichbar. Sie können die apply()-Methode verwenden, indem Sie ein Array von Argumenten anstelle von durch Kommas getrennten Argumenten object_b.combinedText.apply(object_a, ["is", "Best"]) übergeben.

<script>
    function fun() {
        let p = {
        combinedText: function(text1, text2) {
            return this.firstName + " " + this.lastName 
                    + ", " + text1 + ", " + text2;
        }
    }
    let object_a = {
        firstName:"DelftStack",
        lastName: "Technology",
    }
        let x = p.combinedText.apply(object_a, ["Is", "Best"]); 
        document.getElementById("mypara").innerHTML = x;
    }
</script>

Im obigen Beispiel wird die Methode x = object_b.combinedText.apply() mit den Parametern (object_a,[array_arguments]) verwendet.

Im nächsten Schritt müssen wir die Ergebnisvariable in der Absatz-ID mypara anhängen, um den Wert auf der HTML-Seite anzuzeigen.

Verwandter Artikel - JavaScript Method