Neueste Web-Entwicklung Tutorials
 

JavaScript Funktion Invocation


JavaScript-Funktionen können auf 4 verschiedene Arten aufgerufen werden.

Jede Methode unterscheidet sich darin , wie this initialisiert.


Die this Keyword

In JavaScript, das Ding namens this , ist das Objekt , die "Eigentümer" den aktuellen Code.

Der Wert von this , wenn sie in einer Funktion verwendet wird , ist das Objekt , das "besitzt" die Funktion.

Beachten Sie, dass this nicht eine Variable ist. Es ist ein Schlüsselwort. Sie können nicht den Wert ändern this .


Unter Berufung auf eine JavaScript-Funktion

Sie haben bereits gelernt, dass der Code innerhalb einer JavaScript-Funktion wird ausgeführt, wenn "etwas" ruft sie.

Der Code in einer Funktion nicht ausgeführt wird , wenn die Funktion definiert ist. Es wird ausgeführt, wenn die Funktion aufgerufen wird.

Einige Leute benutzen den Begriff "eine Funktion aufrufen" statt "eine Funktion aufrufen".

Es ist auch durchaus üblich, zu sagen, "auf eine Funktion aufrufen", "eine Funktion starten" oder "eine Funktion ausführen".

In diesem Tutorial werden wir invoke verwenden, da eine JavaScript - Funktion kann , ohne genannt aufgerufen werden.


Das Aufrufen einer Funktion als Funktion

Beispiel

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) will return 20
Versuch es selber "

Die Funktion oben gehört nicht zu jedem Objekt. Aber in JavaScript gibt es immer eine globale Standardobjekt.

In HTML ist die globale Standard Objekt der HTML-Seite selbst, so dass die Funktion über "gehört" der HTML-Seite.

In einem Browser ist die Seite Objekt das Browser-Fenster. Die Funktion oben wird automatisch eine Fensterfunktion.

myFunction() und window.myFunction() ist die gleiche Funktion:

Beispiel

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) will also return 20
Versuch es selber "

Dies ist ein üblicher Weg, eine JavaScript-Funktion aufrufen, aber nicht eine sehr gute Praxis.
Globale Variablen, Methoden oder Funktionen können leicht Namenskonflikte und Fehler im globalen Objekt erstellen.


Das globale Objekt

Wenn eine Funktion ohne Besitzer Objekt aufgerufen wird, wird der Wert von this wird das globale Objekt.

In einem Web-Browser ist das globale Objekt das Browser-Fenster.

In diesem Beispiel wird das Fenster - Objekt als Wert this :

Beispiel

function myFunction() {
    return this;
}
myFunction();                // Will return the window object
Versuch es selber "

Unter Berufung auf eine Funktion als globale Funktion bewirkt der Wert this das globale Objekt zu sein.
Mit dem Fensterobjekt als Variable kann das Programm leicht zum Absturz bringen.


Unter Berufung auf eine Funktion als Methode

In JavaScript können Sie Funktion als Objektmethoden definieren.

Im folgenden Beispiel wird ein Objekt ( myObject ), mit zwei Eigenschaften ( firstName und lastName ) und ein Verfahren ( fullName ):

Beispiel

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"
Versuch es selber "

Die fullName - Methode ist eine Funktion. Die Funktion gehört zu dem Objekt. myObject der Inhaber der Funktion ist.

Das Ding namens this ist das Objekt , das den JavaScript - Code "besitzt". In diesem Fall wird der Wert this ist myObject .

Probier es aus! Ändern Sie den fullName Methode , um den Wert der zurück this :

Beispiel

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Will return [object Object] (the owner object)
Versuch es selber "

Aufrufen einer Funktion als eine Objektmethode, bewirkt der Wert von this selbst das Objekt zu sein.


Das Aufrufen einer Funktion mit einer Funktion Constructor

Wenn ein Funktionsaufruf mit dem vorangestellt ist new Schlüsselwort, ist es ein Konstruktor - Aufruf.

Es sieht aus wie Sie eine neue Funktion zu erstellen, aber da JavaScript-Funktionen Objekte sind Sie eigentlich ein neues Objekt erstellen:

Beispiel

// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // Will return "John"
Versuch es selber "

Ein Konstruktor-Aufruf erzeugt ein neues Objekt. Das neue Objekt erbt die Eigenschaften und Methoden von seinem Konstruktor.

Das this Schlüsselwort im Konstruktor haben keinen Wert.
Der Wert this wird das neue Objekt erstellt werden , wenn die Funktion aufgerufen wird.


Das Aufrufen einer Funktion mit einer Funktion Methode

In JavaScript-Funktionen sind Objekte. JavaScript-Funktionen verfügen über Eigenschaften und Methoden.

call() und apply() sind vordefinierte JavaScript - Funktion Methoden. Beide Methoden können verwendet werden, um eine Funktion aufzurufen, und beide Methoden müssen die Eigentümer Objekt als ersten Parameter haben.

Beispiel

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // Will return 20
Versuch es selber "

Beispiel

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // Will also return 20
Versuch es selber "

Beide Methoden nehmen ein Eigentümer Objekt als erstes Argument. Der einzige Unterschied besteht darin , dass call() separat die Funktion Argumente übernimmt und apply() nimmt die Funktion Argumente in einem Array.

In JavaScript strikten Modus wird das erste Argument den Wert this in der aufgerufenen Funktion, auch wenn das Argument nicht ein Objekt ist.

In "nicht strikt" -Modus, wenn der Wert des ersten Arguments null oder nicht definiert ist, wird es mit dem globalen Objekt ersetzt.

Mit call() oder apply() Sie den Wert einstellen können this und rufen eine Funktion als eine neue Methode eines bestehenden Objekts.