Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden

Zusammenfassen

1. Ähnlichkeiten

1. Beide können den internen This-Zeiger ändern, wenn die Zielfunktion ausgeführt wird.
2. Der erste Parameter der Methode wird verwendet, um den internen This-Wert anzugeben, wenn die Funktion ausgeführt wird.
3. Unterstützt die Übergabe einer beliebigen Anzahl von Parametern an die Zielfunktion
4. Wenn Sie dem ersten Parameter der Methode keinen Wert übergeben oder „undefined“ oder „null“ übergeben, dann zeigt „this“ im normalen JavaScript-Modus innerhalb der Zielfunktion auf das Fensterobjekt und im strikten Modus auf „undefined“ bzw. „null“.

2. Unterschied

1. Die Methode apply() akzeptiert zwei Parameter, während die Methoden call() und bind() mehrere Parameter akzeptieren.
2. Wenn die Methode apply() Parameter an die Zielfunktion übergibt, muss sie nur das Parameter-Array oder das Argumentobjekt als zweiten Parameter der Methode übergeben, während die Methoden call() und bind() die Parameter nach einem Parameter der Methode einzeln auflisten müssen.
3. Wenn die Methoden call() und apply() aufgerufen werden, wird die Zielfunktion sofort ausgeführt, die Methode bind() jedoch nicht. Sie gibt eine neue Funktion zurück – eine Kopie der Zielfunktion. Das this innerhalb der Funktion zeigt auf den ersten Parameter der Methode bind(). Das anschließende Ausführen der neuen Funktion ist gleichbedeutend mit dem Ausführen der Zielfunktion.
4. Nur die Methode bind() implementiert das Funktionscurrying und kann daher Parameter zweimal an die Zielfunktion übergeben.

call()-Methode

1. Durch Aufrufen der Methode call() wird die Zielfunktion sofort ausgeführt und die Referenz darauf innerhalb der Funktion geändert. Dies zeigt auf den ersten Parameter der Methode, und alle nacheinander aufgelisteten Parameter werden nacheinander als Parameter der Zielfunktion übergeben.
2. Für den letzten Punkt desselben Punktes in der einleitenden Zusammenfassung lautet das Beispiel wie folgt:

/* Normalmodus */

lass obj = {
  Summe(a, b) {
    console.log(dies)
    gib a + b zurück
  }
}

// Führen Sie die Methoden apply und bind der Funktion sum aus. Das ausgegebene Ergebnis ist das gleiche wie unten. obj.sum.call() // Fenster drucken
obj.sum.call(undefined, 1, 2) // Fenster drucken
obj.sum.call(null, 1, 2) // Fenster drucken

/* Strikter Modus */
„streng verwenden“

// Führe die Methoden apply und bind der Funktion sum aus und drucke dies wie folgt aus: obj.sum.call() // Drucke undefined
obj.sum.call(undefined, 1, 2) // druckt undefined
obj.sum.call(null, 1, 2) // gibt null aus

Simulationsimplementierung

1. Wichtige Punkte

1. Die Methode myCall() wird dem Funktionsprototypobjekt hinzugefügt. Wenn die Zielfunktion diese Methode aufruft, zeigt dies innerhalb der Methode myCall() auf die Zielfunktion.
2. Führen Sie die Zielfunktion als Methode des Kontextobjekts aus, sodass diese innerhalb der Zielfunktion auf das Kontextobjekt verweist. .
3. Entfernen Sie die Zielfunktion aus dem Kontextobjekt
4. Verwenden Sie den Spread-Operator, um die an die Zielfunktion übergebenen Parameter zu verarbeiten

2. Bei der Simulationsimplementierung der Methoden call(), apply() und bind() wird hier im JS-Normalmodus und im strikten Modus eine einheitliche Verarbeitung durchgeführt, wenn der erste Parameter nicht übergeben wird oder undefiniert ist oder null übergeben wird, d. h. dies innerhalb der Zielfunktion zeigt auf das Fensterobjekt.

3. Der Code lautet wie folgt

Function.prototype.myCall = Funktion (Kontext, ...Argumente) {
  if (Kontext === undefiniert || Kontext === null) {
    Kontext = Fenster
  }
  // Die folgende Zeile ist der Kerncode context.fn = this
  const Ergebnis = Kontext.fn(...args)
  lösche context.fn
  Ergebnis zurückgeben
}

lass obj1 = {
  Grundzahl: 1,
  Summe(a, b) {
    console.log(dies)
    gib dies zurück.basicNum + a + b
  }
}
let obj2 = {
  Grundzahl: 9
}
console.log(obj1.sum.call(obj2, 2, 3)) // 14
console.log(obj1.sum.myCall(obj2, 2, 3)) // 14

Methode apply()

Durch den Aufruf der Methode apply() wird die Zielfunktion sofort ausgeführt und die Referenz darauf innerhalb der Funktion geändert. Dies zeigt auf den ersten Parameter der Methode. Der zweite Parameter ist ein Parameterarray oder ein Argumentobjekt. Jeder Parameter, der durch jedes Arrayelement oder Argumentobjekt dargestellt wird, wird einzeln als Parameter der Zielfunktion übergeben.

Simulationsimplementierung

1. Wichtige Punkte

1. Die Methode myApply() wird dem Funktionsprototypobjekt hinzugefügt. Wenn die Zielfunktion diese Methode aufruft, zeigt dies innerhalb der Methode myApply() auf die Zielfunktion.
2. Führen Sie die Zielfunktion als Methode des Kontextobjekts aus, sodass diese innerhalb der Zielfunktion auf das Kontextobjekt verweist.
3. Entfernen Sie die Zielfunktion aus dem Kontextobjekt
4. Verwenden Sie den Spread-Operator, um die an die Zielfunktion übergebenen Parameter zu verarbeiten

2. Der Code lautet wie folgt

Function.prototype.myApply = Funktion (Kontext, Argumente) {
  if (Kontext === undefiniert || Kontext === null) {
    Kontext = Fenster
  }
  // Die folgende Zeile ist der Kerncode context.fn = this
  const Ergebnis = Kontext.fn(...args)
  lösche context.fn
  Ergebnis zurückgeben
}

console.log(obj1.sum.apply(obj2, [2, 3])) // 14
console.log(obj1.sum.myApply(obj2, [2, 3])) // 14

Methode bind()

1. Der Aufruf der Methode bind() gibt eine neue Funktion zurück – eine Kopie der Zielfunktion. Das this innerhalb der Funktion zeigt auf den ersten Parameter der Methode. Alle nacheinander aufgelisteten Parameter werden nacheinander als Parameter der Zielfunktion übergeben. Das anschließende Ausführen der neuen Funktion entspricht dem Ausführen der Zielfunktion.
2. Die Methode bind() implementiert Funktionscurrying, sodass Sie Parameter zweimal an die Zielfunktion übergeben können. Der erste Parameter wird nach dem ersten Parameter der Methode bind() aufgeführt, und der zweite Parameter wird in der neuen Funktion aufgeführt.

Simulationsimplementierung

1. Wichtige Punkte

1. Die Methode myBind() wird dem Funktionsprototypobjekt hinzugefügt. Wenn die Zielfunktion diese Methode aufruft, zeigt dies innerhalb der Methode myBind() auf die Zielfunktion.
2. Führen Sie die Zielfunktion als Methode des Kontextobjekts aus, sodass diese innerhalb der Zielfunktion auf das Kontextobjekt verweist.
3. Entfernen Sie die Zielfunktion aus dem Kontextobjekt
4. Verwenden Sie den Spread-Operator, um die anfänglichen und nachfolgenden Parameter zu verarbeiten, die an die Zielfunktion übergeben werden.

2. Der Code lautet wie folgt

Function.prototype.myBind = Funktion (Kontext, ...initArgs) {
  if (Kontext === undefiniert || Kontext === null) {
    Kontext = Fenster
  }
  // Diesen Wert zwischenspeichern const _this = this
  Rückgabefunktion (...args) {
    // Die folgende Zeile ist der Kerncode context.fn = _this
    const Ergebnis = Kontext.fn(...initArgs, ...args)
    lösche context.fn
    Ergebnis zurückgeben
  }
}

console.log(obj1.sum.bind(obj2, 2)(3)) // 14
console.log(obj1.sum.myBind(obj2, 2)(3)) // 14

Verwandte Wissenspunkte

• Über die Referenz von this in JavaScript

Dies ist das Ende dieses Artikels über die detaillierte Fallanalyse von JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden. Weitere relevante Inhalte zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!