In diesem Artikel werden die Methoden und Prinzipien verschiedener Funktionsaufrufe in JavaScript im Detail vorgestellt, was sehr hilfreich ist, um JavaScript -Funktionen zu verstehen!
JavaScript, 5 Möglichkeiten, Funktionen anzurufen
Immer wieder stellte ich fest, dass der fehlerfreie JavaScript-Code verursacht wird, indem nicht wirklich verstanden wird, wie JavaScript-Funktionen funktionieren (übrigens wird ein Großteil dieses Code von mir geschrieben). JavaScript hat die Art der funktionalen Programmierung, die zu einem Hindernis für unseren Fortschritt wird, wenn wir uns dafür entscheiden.
Lassen Sie uns als Anfänger fünf Funktionsaufrufe testen. Von der Oberfläche werden wir denken, dass diese Funktionen denen in C#sehr ähnlich sind, aber wir können sehen, dass es in Zukunft immer noch sehr wichtige Unterschiede gibt. Das Ignorieren dieser Unterschiede führt zweifellos zu schwer zu verfolgenden Fehler. Lassen Sie uns zunächst eine einfache Funktion erstellen, die unten verwendet wird, und diese Funktion gibt nur den aktuellen Wert dieser und die beiden bereitgestellten Parameter zurück.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
Funktion Makearray (arg1, arg2) {
zurück [this, arg1, arg2];
}
</script>
Die am häufigsten verwendete Methode, aber leider ruft globale Funktionen auf
Wenn wir JavaScript lernen, lernen wir, wie man Funktionen mit der Syntax im obigen Beispiel definiert.
Wir wissen auch, dass das Aufrufen dieser Funktion sehr einfach ist und wir nur tun müssen:
Die Codekopie lautet wie folgt:
Makearray ('eins', 'zwei');
// => [Fenster, 'eins', 'zwei']
Warten Sie eine Minute. Was ist das für ein Fenster
ALERT (typeof fenster.methodthatdoesNtexist);
// => undefiniert
alarm (typeof fenster.makearray);
// =>
window.makearray ('eins', 'zwei');
// => [Fenster, 'eins', 'zwei']
Ich sage, die häufigste Aufrufmethode ist unglücklich, da die von uns erkläre die Funktion standardmäßig global ist. Wir alle wissen, dass globale Mitglieder keine bewährte Programme für das Programmieren sind. Dies ist in JavaScript besonders korrekt. Sie werden es nicht bereuen, globale Mitglieder in JavaScript zu vermeiden.
JavaScript -Funktion Aufruf Regel 1
In Funktionen, die nicht direkt von expliziten Eigentümerobjekten wie MyFunction () bezeichnet werden, wird dieser Wert zum Standardobjekt (Fenster im Browser).
Funktionsaufrufe
Lassen Sie uns nun ein einfaches Objekt erstellen. Verwenden Sie die Makearray -Funktion als Methode. Wir werden die JSON -Methode verwenden, um ein Objekt zu deklarieren, und wir werden diese Methode auch nennen
Die Codekopie lautet wie folgt:
// Erstellen des Objekts
var arrayMaker = {
Someproperty: 'Ein Wert hier',,
Made: Makearray
};
// rufen Sie die make () -Methode auf
ArrayMaker.Make ('One', 'Two');
// => [ArrayMaker, 'eins', 'zwei']
// alternative Syntax mit quadratischen Klammern
ArrayMaker ['make'] ('eins', 'zwei');
// => [ArrayMaker, 'eins', 'zwei']
Sehen Sie den Unterschied hier, dieser Wert wird zum Objekt selbst. Sie fragen sich vielleicht, warum sich die ursprüngliche Funktionsdefinition nicht geändert hat, warum sie kein Fenster ist. So werden Funktionen in JSAVAR übergeben. Funktionen sind ein Standard -Datentyp in JavaScript oder um genau ein Objekt zu sein. Sie können sie übergeben oder kopieren. Es ist, als ob die gesamte Funktion und die Parameterliste und die Funktionsbehörde kopiert und der Eigenschaft im ArrayMaker zugeordnet werden. Daher ist es so, als würde man einen ArrayMaker wie folgt definieren:
Die Codekopie lautet wie folgt:
var arrayMaker = {
Someproperty: 'Ein Wert hier',,
make: function (arg1, arg2) {
zurück [this, arg1, arg2];
}
};
JavaScript -Funktion Aufruf Regel 2
In einer Methode Call Syntax wie obj.myfunction () oder obj ['myfunction'] () ist der Wert davon OBJ
Dies ist die Hauptquelle für Fehler im Ereignisbearbeitungscode. Schauen Sie sich diese Beispiele an
Die Codekopie lautet wie folgt:
<input type = "button" value = "button 1" id = "btn1" />
<input type = "button" value = "button 2" id = "btn2" />
<input type = "button" value = "button 3" id = "btn3" onclick = "buttonclicked ();"/>
<script type = "text/javaScript">
Funktion buttonclicked () {
var text = (this === Fenster)? 'Fenster': this.id;
Alarm (Text);
}
var button1 = document.getElementById ('btn1');
var button2 = document.getElementById ('btn2');
button1.onclick = buttonclicked;
button2.onclick = function () {buttonclicked (); };
</script>
Wenn Sie auf die erste Schaltfläche klicken, wird "BTN" angezeigt, da es sich um einen Methodenaufruf handelt. Dies ist das Objekt, zu dem es gehört (Schaltflächenelement). Wenn Sie auf die zweite Schaltfläche klicken, wird das "Fenster" angezeigt, da die Schaltfläche direkt aufgerufen wird (im Gegensatz zu obj.buttonclicked ().) Dies entspricht dem dritten Schaltfläche, wodurch die Ereignishandhabungsfunktion direkt in das Etikett aufgenommen wird. Das Ergebnis des Klickens auf die dritte Schaltfläche entspricht dem zweiten.
Die Verwendung von JS -Bibliothek wie JQuery hat den Vorteil. Wenn ein Ereignishandler in JQuery definiert ist, hilft die JS -Bibliothek dazu, diesen Wert zu überschreiben, um sicherzustellen, dass sie Verweise auf das aktuelle Ereignisquellelement enthält.
Die Codekopie lautet wie folgt:
// JQuery verwenden
$ ('#btn1'). click (function () {
alarm (this.id); // JQuery sorgt dafür, dass 'dies' der Knopf sein wird
});
Wie überlastet JQuery den Wert davon? Lesen Sie weiter
Die anderen zwei: anwenden () und call ()
Je mehr Sie JavaScript -Funktionen verwenden, desto mehr müssen Sie Funktionen übergeben und in verschiedenen Kontexten aufrufen. Genau wie bei Qjuery bei Veranstaltungsfunktionen müssen Sie diesen Wert häufig zurücksetzen. Denken Sie daran, was ich Ihnen gesagt habe, in JavaScript -Funktionen sind auch Objekte. Funktionsobjekte enthalten einige vordefinierte Methoden, von denen zwei angewendet werden () und call (), mit denen wir dies zurücksetzen können.
Die Codekopie lautet wie folgt:
var gasguzzler = {Jahr: 2008, Modell: 'Dodge Bailout'};
Makearray.Apply (Gasguzzler, ['One', 'Two']);
// => [Gasguzzler, 'eins', 'zwei']
makearray.call (Gasguzzler, 'eins', 'zwei');
// => [Gasguzzler, 'eins', 'zwei']
Diese beiden Methoden sind ähnlich, der Unterschied ist der Unterschied in den folgenden Parametern. Funktion.Apply () verwendet ein Array, um an die Funktion zu gelangen, während function.call () diese Parameter unabhängig übergibt. In der Praxis werden Sie feststellen, dass Apply () in den meisten Fällen bequemer ist.
JSAVARScript -Funktion Ruf Regel 3
Wenn wir den Wert davon überlasten möchten, ohne die Funktion auf eine Methode zu kopieren, können wir myfunction.apply (OBJ) oder myfunction.call (OBJ) verwenden.
Konstruktor
Ich möchte mich nicht mit der Definition von Typen in JavaScript befassen, aber in diesem Moment müssen wir wissen, dass es in JavaScript keine Klasse gibt, und jeder benutzerdefinierte Typ erfordert eine Initialisierungsfunktion. Es ist auch eine gute Idee, Ihren Typ mit einem Prototypobjekt (als Eigenschaft der Initialisierungsfunktion) zu definieren. Erstellen wir einen einfachen Typ
Die Codekopie lautet wie folgt:
// einen Konstruktor deklarieren
FunktionsarrayMaker (arg1, arg2) {
this.someProperty = 'was auch immer';
this.Thearray = [this, arg1, arg2];
}
// Instanziierungsmethode deklarieren
ArrayMaker.Prototype = {
Somemethod: function () {
alarm ('Somemethod genannt');
},
GetArray: function () {
kehre dies zurück.
}
};
var am = new ArrayMaker ('eins', 'zwei');
var Other = New ArrayMaker ('First', 'Second');
am.getArray ();
// => [Am, 'eins', 'zwei']
Eine sehr wichtige und bemerkenswerte ist der neue Bediener, der vor einem Funktionsaufruf erscheint. Ohne das ist Ihre Funktion wie eine globale Funktion, und die Eigenschaften, die wir erstellen, werden in einem globalen Objekt (Fenster) erstellt, und das möchten Sie nicht. Ein weiteres Thema ist, dass Ihr Konstruktor, wenn Sie den neuen Operator verwenden, einige Ihrer Variablen nicht definiert werden, da Sie den neuen Operator verwenden. Aus diesem Grund ist es eine gute Angewohnheit, mit Großbuchstaben zu beginnen. Dies kann als Erinnerung verwendet werden, um den vorherigen neuen Bediener beim Anruf nicht zu vergessen.
Mit einer solchen Vorsicht ähnelt der Code in der Initialisierungsfunktion der Initialisierungsfunktion, die Sie in anderen Sprachen geschrieben haben. Der Wert davon ist das Objekt, das Sie erstellen werden.
JavaScript -Funktion Aufruf Regel 4
Wenn Sie eine Funktion als Initialisierungsfunktion wie MyFunction () verwenden, gibt JavaScript -Laufzeit den Wert dieses als neu erstellten Objekts an.
Ich hoffe, dass das Verständnis der Unterschiede in den verschiedenen Funktionen auf dem Anrufmethoden Ihren SjavaScript -Code von Fehler fernhalten wird, und einige derartigen Fehler wissen immer, dass Sie immer wissen, dass der Wert davon der erste Schritt ist, um sie zu vermeiden.