5 Möglichkeiten, Funktionen in JavaScript 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). Dies wird ein Hindernis für unseren Fortschritt sein.
Als Anfänger werden wir davon ausgehen, dass diese Funktionen den Funktionen in C# sehr ähnlich sind, aber Wie wir gleich sehen werden, gibt es immer noch sehr wichtige Unterschiede. Das Ignorieren dieser Unterschiede führt zweifellos zu Fehlern, die 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 function makeArray(arg1, arg2){
return [ this, arg1, arg2 ];
}

Die am häufigsten verwendete Methode, aber leider globale Funktionsaufrufe, als wir gelernt haben Mit Javascript haben wir im obigen Beispiel gelernt, wie man Funktionen mithilfe der Syntax definiert. Wir wissen auch, dass der Aufruf dieser Funktion sehr einfach ist. Alles, was wir tun müssen, ist:


makeArray('one', 'two');
// => ' eins', 'zwei' ]

Was ist das für ein Fenster


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


window.makeArray('one', 'two');
// => eins ', 'zwei' ]
　
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. Vermeiden Sie die Verwendung globaler Elemente, und Sie werden es nicht bereuen.
JavaScript-Funktionsaufrufregel 1
In Funktionen, die direkt ohne eindeutige Besitzerobjekte aufgerufen werden, wie z. B. myFunction(). bewirkt, dass der Wert von this zum Standardobjekt (dem Fenster im Browser) wird.
Funktionsaufruf Lassen Sie uns nun 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


/ /. Erstellen des Objekts
var arrayMaker = {
someProperty: 'some value here',
make: 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 hier den Unterschied Der Wert wird zum Objekt Sie fragen sich vielleicht, warum sich die ursprüngliche Funktionsdefinition nicht geändert hat. Genauer gesagt sind Funktionen ein Standarddatentyp in JavaScript oder kopieren Sie sie. Es ist, als ob die gesamte Funktion mit der Parameterliste und dem Funktionskörper kopiert und dem Attribut make in arrayMaker zugewiesen wird. Dann ist es so, als würde man einen arrayMaker wie folgt definieren:

var arrayMaker = {
someProperty: 'hier ein Wert',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};

　
JavaScript-Funktionsaufrufregel 2
In einer Methodenaufrufsyntax, wie obj.myFunction() oder obj['myFunction'](), dann ist der Wert davon obj
Dies ist die Hauptursache für Fehler im Ereignis Schauen Sie sich diese Beispiele für den Umgang mit Code an: www.2cto.com

"button" value="Button 2" id="btn2" />




　
Wenn Sie auf die erste Schaltfläche klicken, wird „btn“ angezeigt, da es sich um einen Methodenaufruf handelt, und dies ist das Objekt, zu dem es gehört (das Schaltflächenelement). 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, die die Event-Handler-Funktion direkt in der Beschriftung platziert. Das Ergebnis des Klickens auf die dritte Schaltfläche ist also dasselbe wie das der zweiten. Die Verwendung einer JS-Bibliothek wie jQuery hat folgende Vorteile In jQuery ist eine Ereignisbehandlungsfunktion definiert. Die JS-Bibliothek hilft dabei, den Wert dieser Funktion neu zu schreiben, um sicherzustellen, dass sie einen Verweis auf das aktuelle Ereignisquellenelement enthält.
//JQuery verwenden $('#btn1').click ( function() { Alert( this.id ); // jQuery stellt sicher, dass „this“ die Schaltfläche ist });
Wie überschreibt jQuery den Wert von this?
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 dieser Funktion häufig zurücksetzen Ich habe Ihnen gesagt, dass Funktionen auch Objekte in Javascript enthalten, von denen zwei apply() und call() sind. Wir können sie verwenden, um dies zurückzusetzen.
var gasGuzzler = { Jahr: 2008, Modell: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// = > [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]
　
Die beiden Methoden sind bis auf Folgendes ähnlich Parameter. Function.apply() verwendet ein Array zur Übergabe an die Funktion, während Function.call() diese Parameter unabhängig übergibt. Ja, in der Praxis werden Sie feststellen, dass apply() in den meisten Fällen praktischer ist.
JSavacript-Funktion Aufrufregel 3
Wenn wir den Wert dieser Funktion überladen möchten, ohne die Funktion in eine Methode zu kopieren, können wir den Konstruktor myFunction.apply( obj ) oder myFunction.call( obj ) verwenden Gehen Sie auf die Definition von Typen in Javascript ein, aber zu diesem Zeitpunkt müssen wir wissen, dass es in Javascript keine Klassen gibt und jeder benutzerdefinierte Typ eine Initialisierungsfunktion erfordert. Es ist auch eine gute Idee, das Prototypobjekt (als Attribut) zu verwenden der Initialisierungsfunktion), um Ihren Typ zu definieren. Lassen Sie uns einen einfachen Typ erstellen // einen Konstruktor deklarieren

function ArrayMaker (arg1, arg2) {
this.someProperty = 'whatever';
this. theArray = [ this, arg1, arg2 ];
}
// Deklarieren Sie die Instanziierungsmethode
ArrayMaker Prototyp = {
someMethod: function () {
warning( 'someMethod aufgerufen') ;
},
getArray: function () {
return this.theArray;
}
};

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

am .getArray();
// => ' ]

　
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 erstellt auf dem globalen Objekt (Fenster), und das möchten Sie nicht. Ein weiteres Thema ist, dass, wenn Sie vergessen, den neuen Operator zu verwenden, einigen Ihrer Variablen der Wert zugewiesen wird Aus diesem Grund ist es eine gute Angewohnheit, die Konstruktorfunktion mit einem Großbuchstaben zu beginnen, der beim Aufruf als Erinnerung dienen kann. Vergessen Sie nicht den vorherigen neuen Operator. Mit dieser Sorgfalt ist der Code in der Initialisierungsfunktion ähnlich Der Wert davon ist das Objekt, das Sie erstellen.
Javascript-Funktionsaufrufregel 4
Wenn Sie eine Funktion als Initialisierungsfunktion verwenden, z Die Laufzeit gibt den Wert dieses Objekts als neu erstelltes Objekt an.
Ich hoffe, dass das Verständnis verschiedener Funktionsaufrufmethoden Unterschiede in Ihrem JavaScript-Code von Fehlern fernhält. Der erste Schritt zur Vermeidung besteht darin, sicherzustellen, dass Sie immer den Wert dieses Objekts kennen ihnen.