JavaScript Funktionsaufruf

JavaScript-Funktionen haben 4 Aufrufmethoden.

Der Unterschied zwischen den einzelnen Methoden liegt inthisder Initialisierung von

thisSchlüsselwörter

Allgemein gesagt, in JavaScript verweist this auf das aktuelle Objekt, wenn die Funktion ausgeführt wird.

Note Hinweisthisist ein reserviertes Schlüsselwort, Sie könnenthisden Wert davon nicht ändern.

Aufrufen von JavaScript-Funktionen

In den vorherigen Kapiteln haben wir gelernt, wie man Funktionen erstellt.

Der Code innerhalb einer Funktion wird ausgeführt, nachdem die Funktion aufgerufen wurde.

Aufruf als Funktion

Beispiel

function myFunction(a, b) { return a * b; } myFunction(10, 2); //myFunction(10, 2) gibt 20 zurück

Selbst ausprobieren »

Die obige Funktion gehört zu keinem Objekt. Aber in JavaScript ist sie immer das standardmäßige globale Objekt.

In HTML ist das standardmäßige globale Objekt die HTML-Seite selbst, daher gehört die Funktion zur HTML-Seite.

Das Seitenobjekt in einem Browser ist das Browserfenster (das window-Objekt). Die obige Funktion wird automatisch zu einer Funktion des window-Objekts.

myFunction() und window.myFunction() sind gleich:

Beispiel

function myFunction(a, b) { return a * b; } window.myFunction(10, 2); //window.myFunction(10, 2) gibt 20 zurück

Selbst ausprobieren »

Note Dies ist eine gängige Methode zum Aufrufen von JavaScript-Funktionen, aber es ist keine gute Programmierpraxis.
Globale Variablen, Methoden oder Funktionen können leicht Fehler durch Namenskonflikte verursachen.

Globales Objekt

Wenn eine Funktion nicht durch ihr eigenes Objekt aufgerufen wird,thiswird der Wert von this zum globalen Objekt.

In einem Webbrowser ist das globale Objekt das Browserfenster (das window-Objekt).

Dieses Beispiel gibtthiszurück; der Wert von this ist das window-Objekt:

Beispiel

function myFunction() { return this; } myFunction(); //Gibt das window-Objekt zurück

Selbst ausprobieren »

Note Das Aufrufen einer Funktion als globales Objekt machtthisden Wert von this zum globalen Objekt.
Die Verwendung des window-Objekts als Variable kann das Programm leicht zum Absturz bringen.

Aufrufen einer Funktion als Methode

In JavaScript können Sie eine Funktion als Methode eines Objekts definieren.

Das folgende Beispiel erstellt ein Objekt (myObject), das Objekt hat zwei Eigenschaften (firstNameundlastName) und eine Methode (fullName):

Beispiel

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); //Gibt "John Doe" zurück

Selbst ausprobieren »

fullNameEine Methode ist eine Funktion. Eine Funktion gehört zu einem Objekt.myObjectist der Eigentümer der Funktion.

thisEin Objekt, das JavaScript-Code besitzt. Im Beispiel,thisder Wert von this istmyObjectdas Objekt.

Teste es! ÄnderefullNamedie Methode und gibthisden Wert zurück:

Beispiel

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this; } } myObject.fullName(); //Gibt [object Object] zurück (das Besitzerobjekt)

Selbst ausprobieren »

Note Das Aufrufen einer Funktion als Objektmethode machtthiszum Wert von this, nämlich dem Objekt selbst.

Aufrufen einer Funktion mit einem Konstruktor

Wenn dem Funktionsaufruf dasnewSchlüsselwort vorangestellt ist, dann wird ein Konstruktor aufgerufen.

Das sieht wie das Erstellen einer neuen Funktion aus, aber tatsächlich sind JavaScript-Funktionen neu erstellte Objekte:

Beispiel

//Konstruktor: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // Dies erzeugt ein neues Objekt var x = new myFunction("John","Doe"); x.firstName; //Gibt "John" zurück

Selbst ausprobieren »

Ein Konstruktoraufruf erzeugt ein neues Objekt. Das neue Objekt erbt die Eigenschaften und Methoden des Konstruktors.

Note Im Konstruktor hat dasthisSchlüsselwort keinen Wert.
thisDer Wert von this wird erstellt, wenn der Funktionsaufruf das Objekt instanziiert (neues Objekt).

Eine Funktion als Funktionsmethode aufrufen

In JavaScript sind Funktionen Objekte. JavaScript-Funktionen haben ihre eigenen Eigenschaften und Methoden.

call()undapply()sind vordefinierte Funktionsmethoden.

Beispiel

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); //Gibt 20 zurück

Selbst ausprobieren »

Beispiel

function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); //Gibt 20 zurück

Selbst ausprobieren »

Beide Methoden verwenden das Objekt selbst als ersten Parameter. Der Unterschied zwischen den beiden liegt im zweiten Parameter: apply nimmt ein Array von Argumenten, das heißt, mehrere Argumente werden zu einem Array zusammengefasst und übergeben, während call sie als Argumente von call übergibt (beginnend mit dem zweiten Parameter).

Im JavaScript-Strict-Modus wird beim Aufrufen einer Funktion der erste Parameter zuthisdem Wert von this, auch wenn der Parameter kein Objekt ist.

Im nicht-strikten Modus von JavaScript wird stattdessen das globale Objekt verwendet, wenn der erste Parameter null oder undefined ist.

Note Über die Methoden call() oder apply() können Siethisden Wert von this festlegen und sie als neue Methode eines vorhandenen Objekts aufrufen.
Andere Erweiterungen