JS-Funktionsaufruf, Anwenden und Binden einer superdetaillierten Methode

JS-Funktionsaufruf, Apply- und Bind-Methoden

1. call()-Methode

Durch Aufrufen call() wird die Zielfunktion sofort ausgeführt und die Referenz this 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.

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

1. Simulationsimplementierung der call()-Methode

Wichtige Punkte:

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

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

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

2. apply()-Methode

Durch den Aufruf apply() wird die Zielfunktion sofort ausgeführt und die Referenz this 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.

1. Simulationsimplementierung der apply()-Methode

Wichtige Punkte:

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

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

3. bind()-Methode

• Der Aufruf bind() gibt eine neue Funktion zurück – eine Kopie der Zielfunktion. this innerhalb der Funktion zeigt auf den ersten Parameter der Methode, und 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.
• 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.

1. Simulationsimplementierung der bind()-Methode

Wichtige Punkte:

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

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

IV. Fazit

Gemeinsamkeiten und Unterschiede der drei Verfahren:

Ähnlichkeiten:
Beide können den internen this-Punkt ändern, wenn die Zielfunktion ausgeführt wird. Der erste Parameter der Methode wird verwendet, um den internen this-Wert anzugeben, wenn die Funktion ausgeführt wird. Es wird die Übergabe einer beliebigen Anzahl von Parametern an die Zielfunktion unterstützt. Wenn an den ersten Parameter der Methode kein Wert übergeben wird oder undefined oder null übergeben wird, dann zeigt this im normalen JavaScript-Modus innerhalb der Zielfunktion auf das Fensterobjekt und im strikten Modus auf undefined bzw. null.

Der Unterschied:
Die Methode apply() akzeptiert zwei Parameter, während die Methoden call() und bind() mehrere Parameter akzeptieren.
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.
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.
Nur die Methode bind() implementiert das Funktionscurrying und kann daher Parameter zweimal an die Zielfunktion übergeben.

Oben sind die Details der äußerst detaillierten Methoden zum Aufrufen, Anwenden und Binden von JS-Funktionen aufgeführt. Weitere Informationen zu den Methoden zum Aufrufen, Anwenden und Binden von JS-Funktionen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!