Einführung in verschiedene Möglichkeiten zum Aufrufen von Funktionsmethoden in Javascript_Javascript-Kenntnissen

JavaScript-Syntax ist flexibel und es ist nicht ungewöhnlich, dass es fünf oder sechs Möglichkeiten gibt, dieselbe Funktion zu implementieren. In Verbindung mit einigen menschenfeindlichen Prototypenvererbungen und asynchronen Funktionen wird es noch verwirrender. Ich verstehe den Unterschied zwischen Anruf und Bewerbung oft nicht. Ich werde ihn heute aufzeichnen, um ihn nicht wieder zu vergessen.

In JavaScript können Methoden auf folgende Weise ausgeführt werden:

1.func(), dies ist die direkteste und gebräuchlichste Aufrufmethode und entspricht auch der Denklogik gewöhnlicher Menschen. In einigen Fällen weist sie jedoch einige Mängel auf, die im Folgenden erläutert werden.

2. (function(arg){})(window), anonymer Methodenaufruf, ist beim Erstellen eines Namespace nützlicher. Die Parameter in den folgenden Klammern entsprechen den Eingabeparametern in der anonymen Methode.

3.func.bind(sth)(), Mozilla-Handbuch erwähnte, dass Bind eine neue Funktion ist, die in ECMA-262 5th Edition hinzugefügt wurde und hier separat aufgeführt ist Durch die Aufrufmethode wird der Fehler ausgeglichen, dass der Bereich bei direkten Aufrufen nicht gebunden werden kann.

4.func.call(), dies ist die zweite aufrufende Methode. Die Aufrufmethode wird im Prototyp jeder Methode definiert, um die aktuelle Methode auszuführen.

5.func.apply(), Calls Zwillingsbruder.

func()

Dies ist die gebräuchlichste Aufrufmethode und kann überall in jeder Sprache gefunden werden. func(x, y) kann verschiedene Parameter übergeben. In einigen Sprachen wie PHP und Java reicht dieser Aufruf aus, um alle Probleme zu lösen. Aber JavaScript ist eine funktionale Sprache, und das Konzept des Abschlusses und ein seltsames Schlüsselwort bestimmen die Mängel dieser Aufrufmethode. Dies sollte als der Umfang des aktuellen Codesegments interpretiert werden, der sich ändert, wenn der Code in verschiedenen Segmenten ausgeführt wird. In einigen Fällen möchten wir jedoch nicht, dass sich dies ändert, z. B. bei Ereignissen, die an ein bestimmtes DOM gebunden sind Wir möchten nicht, dass dies beim Aufruf an das Fensterobjekt übertragen wird, aber manchmal ist es so, wie zum Beispiel im folgenden Code.

Code kopieren Der Code lautet wie folgt:

var a ={};
var func = function(x) {
console.log(this);
};
a.onclick = function() {
var x = 100;
func(x);
};
a.onclick();

Sie können sich a als Link auf der Seite vorstellen, anstatt sie sofort aufzurufen, und diese Methode einen Parameter hat, müssen wir eine anonyme Methode Wrap verwenden es und übergebe es an das onclick-Ereignis von a. Es gibt ein Problem. Dies wird zum globalen Objektfenster. Offensichtlich wollen wir das nicht. Zu diesem Zeitpunkt funktioniert der direkte Aufruf mit func() nicht, daher müssen wir diese externe Funktion an die Methode func binden. Es gibt also Bind-, Call- und Apply-Methoden.

binden

Der Zweck von bind ist sehr einfach: Geben Sie dieselbe Methode zurück, die an dieses Objekt gebunden ist. Durch Ändern einer Zeile des obigen Codes kann der Zweck erreicht werden, diese an ein Objekt zu binden.

Code kopieren Der Code lautet wie folgt:

var a ={};
var func = function(x) {
console.log(this);
};
a.onclick = function() {
var x = 100;
func.bind(this)(x); // hier binden
};
a.onclick();

Auf diese Weise läuft dieses Onclick-Event nicht wie eine kopflose Fliege herum.

Anrufen und bewerben

Anruf und Bewerbung sollten zusammen erwähnt werden, weil sie so ähnlich sind. Beide unterstützen mehrere Parameter, und der erste Parameter ist das Objekt, das gebunden wird. Der zweite Parameter ist der Unterschied zwischen ihnen. call verwendet unabhängige Parameter als Eingabeparameter der aufrufenden Methode und apply verwendet ein Array als Eingabeparameter . . Manchmal möchten wir dieses Objekt nicht ändern, sondern es künstlich an andere Objekte binden. Zu diesem Zeitpunkt sind Aufruf und Anwenden sehr nützlich. (Das bedeutet nicht, dass Sie bind nicht verwenden können, aber es scheint, dass bind relativ spät erschien und möglicherweise die Browserkompatibilität nicht gut ist.) Geben Sie mir ein Beispiel:

Code kopieren Der Code lautet wie folgt:

a = {
func: function() {
This.x = 1;
          },
x: 0
};
b = {
a: a,
x: 20
};
for(var i = 0; i < 10; i ){
b.a.func();
}
console.log(a.x);
console.log(b.x);

Die oben genannten a- und b-Objekte haben beide x. Wir hoffen, dass func das entsprechende x gezielt ändern kann, aber direkte Aufrufe können x nur im Rahmen von func ändern, also a.x. Durch Ändern des Codes können Sie den Zweck der Änderung von b.x
erreichen

Code kopieren Der Code lautet wie folgt:

a = {
func: function() {
This.x = 1;
          },
x: 0
};
b = {
a: a,
x: 20
};
for(var i = 0; i < 10; i ){
b.a.func.call(b); // binde dies an b
}
console.log(a.x);
console.log(b.x);

Diese Kastanie ist nicht gut dargestellt, etwas weit hergeholt und ein leicht verwirrender Codierungsstil. Es gibt anwendbare Szenarien, aber er ist nicht überall anwendbar.