5 Möglichkeiten zum Aufrufen von Funktionen in JavaScript_Javascript-Kenntnissen

In diesem Artikel werden die Methoden und Prinzipien verschiedener Funktionsaufrufe in JavaScript ausführlich vorgestellt, was für das Verständnis von JavaScript-Funktionen sehr hilfreich ist!

JavaScript, 5 Möglichkeiten, Funktionen aufzurufen

Ich stelle immer wieder fest, dass fehlerhafter JavaScript-Code darauf zurückzuführen ist, dass wir nicht wirklich verstehen, wie JavaScript-Funktionen funktionieren (übrigens habe ich viele dieser Codes über funktionale Programmiereigenschaften geschrieben, wenn wir uns damit auseinandersetzen). Es wird ein Hindernis für unseren Fortschritt sein

Als Anfänger testen wir fünf Methoden zum Funktionsaufruf. Oberflächlich betrachtet werden wir denken, dass diese Funktionen den Funktionen in C# sehr ähnlich sind, aber wir werden gleich sehen, dass es immer noch sehr wichtige Unterschiede gibt. Das Ignorieren dieser Unterschiede wird zweifellos dazu führen, dass Fehler schwer zu verfolgen sind. Lassen Sie uns zunächst eine einfache Funktion erstellen, die im Folgenden verwendet wird. Diese Funktion gibt nur den aktuellen Wert dieses und der beiden bereitgestellten Parameter zurück

Code kopieren Der Code lautet wie folgt:

Die am häufigsten verwendete Methode, aber leider globale Funktionsaufrufe

Als wir Javascript lernten, lernten wir, wie man Funktionen mithilfe der Syntax im obigen Beispiel definiert.
Wir wissen auch, dass der Aufruf dieser Funktion sehr einfach ist. Wir müssen lediglich Folgendes tun:

Code kopieren Der Code lautet wie folgt:

makeArray('one', 'two');
// => [ window, 'one', 'two' ]

Warte mal. Was ist das für ein Fenster?


Alert( typeof window.methodThatDoesntExist );
// => undefiniert
alarm(typeof window.makeArray);
// =>


window.makeArray('one', 'two');
// => [ window, 'one', 'two' ]

Ich sage, die häufigste Aufrufmethode ist unglücklich, weil sie dazu führt, dass die von uns deklarierten Funktionen standardmäßig global sind. Wir alle wissen, dass globale Mitglieder keine bewährte Methode in der Programmierung sind. Dies gilt insbesondere für JavaScript Globale Mitglieder, Sie werden es nicht bereuen.

JavaScript-Funktionsaufrufregel 1
In Funktionen, die direkt ohne explizites Eigentümerobjekt aufgerufen werden, wie z. B. myFunction(), führt der Wert von this dazu, dass der Wert von this zum Standardobjekt (Fenster im Browser) wird.

Funktionsaufruf

Lassen Sie uns jetzt ein einfaches Objekt erstellen und dabei die Funktion makeArray als eine seiner Methoden verwenden. Wir werden JSON verwenden, um ein Objekt zu deklarieren, und wir werden diese Methode auch aufrufen

Code kopieren Der Code lautet wie folgt:

//Erstellen des Objekts
var arrayMaker = {
SomeProperty: 'hier etwas Wert',
Erstellen: makeArray
};

//die Methode make() aufrufen
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative Syntax mit eckigen Klammern
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

Sehen Sie sich den Unterschied an. Der Wert davon wird zum Objekt selbst. Sie fragen sich vielleicht, warum sich die ursprüngliche Funktionsdefinition nicht geändert hat. Warum wird die Funktion nicht auf diese Weise in JSavascript übergeben? Eine Funktion ist ein Standarddatentyp in JavaScript, genauer gesagt ein Objekt. Sie können sie übergeben oder kopieren. Es ist, als ob die gesamte Funktion mit der Parameterliste und dem Funktionskörper kopiert und dem ArrayMaker-Attribut zugewiesen wird arrayMaker wie folgt:

Code kopieren Der Code lautet wie folgt:

var arrayMaker = {
SomeProperty: 'hier etwas Wert',
Erstellen Sie: Funktion (arg1, arg2) {
          return [ this, arg1, arg2 ];
}
};

JavaScript-Funktionsaufrufregel 2

In einer Methodenaufrufsyntax wie obj.myFunction() oder obj['myFunction']() ist der Wert davon obj

Dies ist eine Hauptquelle für Fehler im Ereignisverarbeitungscode. Schauen Sie sich diese Beispiele an

Code kopieren Der Code lautet wie folgt:

Wenn Sie auf die erste Schaltfläche klicken, wird „btn“ angezeigt, da es sich um einen Methodenaufruf handelt, und dies ist das Objekt (Schaltflächenelement), zu dem es gehört. Wenn Sie auf die zweite Schaltfläche klicken, wird „window“ angezeigt, da buttonClicked direkt aufgerufen wird (im Gegensatz zu obj. buttonClicked().) Dies ist dasselbe wie unsere dritte Schaltfläche, wobei die Event-Handler-Funktion direkt in der Beschriftung platziert wird. Das Ergebnis des Klickens auf die dritte Schaltfläche ist also dasselbe wie das der zweiten Die Verwendung einer JS-Bibliothek wie jQuery hat den Vorteil, dass die JS-Bibliothek beim Definieren einer Ereignisbehandlungsfunktion in jQuery dabei hilft, den Wert dieser Funktion neu zu schreiben, um sicherzustellen, dass sie einen Verweis auf das aktuelle Ereignisquellenelement
enthält

Code kopieren Der Code lautet wie folgt:

//JQuery verwenden
$('#btn1').click( function() {
warning( this.id ); // jQuery stellt sicher, dass „this“ die Schaltfläche ist
});

Wie überlastet jQuery den Wert? Weiterlesen
Die anderen beiden: apply() und call()

Je mehr Sie JavaScript-Funktionen verwenden, desto mehr müssen Sie Funktionen übergeben und in verschiedenen Kontexten aufrufen, genau wie Qjuery es in Ereignishandlern tut, und Sie müssen den Wert davon oft zurücksetzen Sie, Funktionen sind auch Objekte in Javascript. Zwei davon sind apply() und call(). Wir können sie verwenden, um dies zu ändern.

Code kopieren Der Code lautet wie folgt:

var gasGuzzler = { Jahr: 2008, Modell: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'eins' , 'zwei' ]
makeArray.call( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'eins' , 'zwei' ]

Der Unterschied besteht in den folgenden Parametern: Function.apply() verwendet ein Array zur Übergabe an die Funktion, während Function.call() diese Parameter unabhängig übergibt. ) ist in den meisten Fällen bequemer.

JSascript-Funktionsaufrufregel 3

Wenn wir den Wert davon überladen möchten, ohne die Funktion in eine Methode zu kopieren, können wir myFunction.apply( obj ) oder myFunction.call( obj ) verwenden.

Konstrukteur

Ich möchte mich nicht mit der Definition von Typen in Javascript befassen, aber an diesem Punkt müssen wir wissen, dass es in Javascript keine Klassen gibt und jeder benutzerdefinierte Typ eine Initialisierungsfunktion benötigt, die mithilfe des Prototypobjekts definiert wird (as ein Attribut der Initialisierungsfunktion) Ihr Typ ist auch ein netter Ismus, erstellen wir einen einfachen Typ

Code kopieren Der Code lautet wie folgt:

//Deklariere einen Konstruktor
Funktion ArrayMaker(arg1, arg2) {
This.someProperty = 'whatever';
This.theArray = [ this, arg1, arg2 ];
}
// Instanziierungsmethode deklarieren
ArrayMaker.prototype = {
SomeMethod: Funktion () {
alarm( 'someMethod aufgerufen');
},
GetArray: Funktion () {
          return this.theArray;
}
};

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );

am.getArray();
// => [ bin, 'eins', 'zwei' ]

Eine sehr wichtige und bemerkenswerte Sache ist der neue Operator, der vor dem Funktionsaufruf erscheint. Ohne ihn ist Ihre Funktion wie eine globale Funktion, und die von uns erstellten Eigenschaften werden für das globale Objekt (Fenster) und Sie erstellt Wenn Sie das nicht möchten, ist ein anderes Thema, dass, wenn Sie vergessen, den neuen Operator zu verwenden, einige Ihrer Variablen zugewiesen werden, da Ihr Konstruktor keinen Rückgabewert hat. Aus diesem Grund ist die Konstruktorfunktion nicht definiert Es ist eine gute Angewohnheit, mit einem Großbuchstaben zu beginnen, der als Erinnerung daran dienen kann, beim Anruf den vorherigen neuen Operator nicht zu vergessen

Mit dieser Vorsicht ähnelt der Code in der Initialisierungsfunktion der Initialisierungsfunktion, die Sie in anderen Sprachen schreiben. Der Wert davon ist das Objekt, das Sie erstellen werden.

Javascript-Funktionsaufrufregel 4

Wenn Sie eine Funktion wie MyFunction() als Initialisierungsfunktion verwenden, weist die Javascript-Laufzeit den Wert dieser dem neu erstellten Objekt zu.

Ich hoffe, dass das Verständnis der Unterschiede in der Art und Weise, wie verschiedene Funktionen aufgerufen werden, Ihren JavaScript-Code von Fehlern fernhält, und sicherzustellen, dass Sie immer wissen, welchen Wert dies hat, ist der erste Schritt, um sie zu vermeiden.