Detaillierte Erläuterung der 4 Aufrufmethoden von JavaScript-Funktionen_Javascript-Fähigkeiten

In JavaScript sind Funktionen erstklassige Bürger. Funktionen sind ein Datentyp in JavaScript und werden nicht nur als Modul wie C# oder andere beschreibende Sprachen verwendet. Es gibt vier Aufrufmodi für Funktionen: Funktionsaufrufform, Methodenaufrufform, Konstruktorform und Anwendungsform. Der Hauptunterschied zwischen allen Aufrufmodi liegt in der Bedeutung des Schlüsselworts this. Diese Aufrufformen werden im Folgenden vorgestellt.

Hauptinhalt dieses Artikels:

1. Analysieren Sie die vier Aufrufformen von Funktionen
Klären Sie die Bedeutung davon in der Funktion
Lernen Sie, den Kontext zum Aufrufen von Funktionen zu verwenden

1. Funktionsaufrufformular

Die Funktionsaufrufform ist die gebräuchlichste und am besten verstandene Form. Die sogenannte Funktionsform besteht darin, eine Funktion zu deklarieren und direkt aufzurufen. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

// Deklarieren Sie eine Funktion und call
function func() {
warning("Hello World");
}
func();

oder:

Code kopieren Der Code lautet wie folgt:

// Definieren Sie die Funktion mithilfe des Lambda-Ausdrucks der Funktion und rufen Sie dann
var auf func = function() {
warning("Hallo, Programmierer");
};
func();

Diese beiden Codeteile öffnen ein Dialogfeld im Browser um den Text in der Zeichenfolge anzuzeigen. Dies ist ein Funktionsaufruf.
Sie können feststellen, dass der Funktionsaufruf sehr einfach ist, genau wie das, was Sie normalerweise lernen. Der Schlüssel hier ist, dass sich das Schlüsselwort this in der Funktion auf das globale Objekt bezieht, das das Fensterobjekt in ist Browser. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var func = function() {
Alert(this);
};
func();

Zu diesem Zeitpunkt wird ein Dialogfeld angezeigt und [Objektfenster] ausgedruckt.

2. Methodenaufrufmodus

Der Funktionsaufrufmodus ist sehr einfach und die grundlegendste Aufrufmethode. Aber es ist die gleiche Funktion, aber sie unterscheidet sich, nachdem sie einem Mitglied eines Objekts zugewiesen wurde. Nachdem einem Mitglied eines Objekts eine Funktion zugewiesen wurde, wird diese nicht mehr als Funktion, sondern als Methode bezeichnet. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

// Definiere eine Funktion
var func = function() {
warning("Bin ich eine Funktion?");
};
// Weise es einem Objekt zu
var o = {};
o. fn = func; // Achten Sie darauf, hier keine Klammern hinzuzufügen
// Rufen Sie
o.fn(); auf. Zu diesem Zeitpunkt ist o.fn eine Methode, keine Funktion . Tatsächlich ist der Methodenkörper von fn genau derselbe wie der von func, aber hier gibt es einen subtilen Unterschied. Schauen Sie sich den Code unten an:

Kopieren Sie den Code Der Code lautet wie folgt:// Fahren Sie mit dem obigen Code fort

alert(o.fn === func);

Das gedruckte Ergebnis ist wahr, was darauf hinweist, dass die beiden Funktionen dasselbe sind, aber den Code der Funktion ändern:

//Funktionskörper ändern
var func = function() { alarm(this);

};
var o = {};
o.fn = func;
//Compare
alert(o.fn === func);
// Call
func();
o.fn();

Hier ausführen Dadurch sind beide Funktionen identisch, das gedruckte Ergebnis ist also wahr. Da jedoch die Aufrufe der beiden Funktionen unterschiedlich sind, druckt der Aufruf von func [Objektfenster], während das Druckergebnis von o.fn [Objektobjekt] ist.

Hier ist der Unterschied zwischen Funktionsaufruf und Methodenaufruf. Beim Funktionsaufruf bezieht sich dies speziell auf das globale Objektfenster, während sich dies bei der Methode speziell auf das aktuelle Objekt bezieht, d. h., dies bezieht sich in o.fn auf das Objekt O.

3. Konstruktor-Aufrufmodus

Im reinen Funktionsmodus bezieht sich dies auf das Fenster, im Objektmethodenmodus auf das aktuelle Objekt. Zusätzlich zu diesen beiden Fällen können Funktionen in JavaScript auch Konstruktoren sein. Die Syntax für die Verwendung einer Funktion als Konstruktor besteht darin, dem Funktionsaufruf das Schlüsselwort new voranzustellen. Zum Beispiel Code:

Code kopieren Der Code lautet wie folgt:

// Definiere einen Konstruktor
var Person = function() {
this.name = "Programmer";
this.sayHello = function() {
warning( "Hallo , das ist" this.name);
};
};
// Rufen Sie den Konstruktor auf und erstellen Sie das Objekt
var p = new Person();
// Use Object
p.sayHello();

Der obige Fall erstellt zunächst einen Konstruktor Person und verwendet dann den Konstruktor, um das Objekt p zu erstellen. Hier wird eine neue Syntax verwendet. Verwenden Sie dann das Objekt, um die Methode sayHello() aufzurufen. Dieser Fall der Verwendung eines Konstruktors zum Erstellen eines Objekts ist relativ einfach. Wie Sie an der Hülle erkennen können, handelt es sich hierbei um das Objekt selbst. Zusätzlich zu der oben genannten einfachen Verwendung gibt es mehrere Änderungen an Funktionen als Konstruktoren, nämlich:

1. Alle Attribute, die vom Objekt verwendet werden müssen, müssen sich daran orientieren

2. Die Bedeutung der Return-Anweisung der Funktion wurde neu geschrieben. Wenn ein Nicht-Objekt zurückgegeben wird, wird dieses zurückgegeben.

dies

im Konstruktor

Wir müssen den Prozess der Objekterstellung analysieren, um die Bedeutung dessen zu verstehen. Zum Beispiel der folgende Code:

Kopieren Sie den Code Der Code lautet wie folgt:

var Person = function() {
This.name = "Programmer";
};
var p = new Person();

Hier wird zunächst die Funktion Person definiert gesamte Ausführung:
1. Wenn das Programm diesen Satz ausführt, führt es den Funktionskörper nicht aus, sodass der JavaScript-Interpreter den Inhalt dieser Funktion nicht kennt.

2. Führen Sie als Nächstes das Schlüsselwort new aus, um ein Objekt zu erstellen, ruft einen Verweis auf das Objekt ab und übergibt den Verweis auf das neue Objekt an die Funktion.

3. Führen Sie dann die Funktion aus und übergeben Sie die übergebene Objektreferenz an diese. Mit anderen Worten, im Konstruktor ist dies das gerade von new erstellte Objekt.

4. Fügen Sie dann Mitglieder hinzu, dh fügen Sie dem Objekt Mitglieder hinzu.

5. Schließlich endet die Funktion, gibt dies zurück und übergibt dies an die Variable auf der linken Seite.

Nachdem wir die Ausführung des Konstruktors analysiert haben, können wir feststellen, dass dies im Konstruktor das aktuelle Objekt ist.

Rückgabe

im Konstruktor

Die Bedeutung von return im Konstruktor hat sich geändert. Wenn im Konstruktor ein Objekt zurückgegeben wird, bleibt die ursprüngliche Bedeutung erhalten. Wenn ein Nicht-Objekt zurückgegeben wird, z. B. Zahlen, Boolesche Werte und Zeichenfolgen, wird dies zurückgegeben. Wenn keine Rückgabeanweisung vorhanden ist, wird auch dies zurückgegeben:

Code kopieren Der Code lautet wie folgt:

// Ein Objekt zurückgeben return
var ctr = function() {
this .name = "Zhao Xiaohu";
return {
name:"Niu Liangliang"
};
};
//Objekt erstellen
var p = new ctr();
//Access name attribute
alert(p.name);

Führen Sie den Code aus und das hier gedruckte Ergebnis ist „Niu Liangliang“. Da der Konstruktor ein Objekt zurückgibt, bleibt die Bedeutung von return erhalten und der zurückgegebene Inhalt ist das Objekt nach der Rückgabe. Sehen Sie sich den folgenden Code an:

Code kopieren Der Code lautet wie folgt:

// Definieren Sie den Konstruktor, der Nicht-Objekt-Daten zurückgibt
var ctr = function() {
this.name = " Zhao Xiaohu";
Return "Niu Liangliang";
};
// Objekt erstellen
var p = new ctr();
// Use
alert(p);
alert(p. name);

Das Ergebnis der Ausführung des Codes ist, dass das Popup-Fenster zuerst [object Object] und dann „Zhao Xiaohu“ druckt Zeichenfolge, die zum Basistyp gehört, dann ist die Rückgabeanweisung hier ungültig und gibt dieses Objekt zurück, sodass die erste [Objektobjekt] ausgibt und die zweite nicht undefiniert ausgibt.

4. Anrufmodus anwenden

Zusätzlich zu den oben genannten drei Aufrufmodi verfügen Funktionen als Objekte auch über Anwendungsmethoden und Aufrufmethoden, die verwendet werden können. Dies ist der vierte Aufrufmodus, den ich den Anwendungsmodus nenne.

Führen Sie zunächst den Anwendungsmodus ein. Zunächst kann der Anwendungsmodus als eine flexible Verwendungsmethode bezeichnet werden. Schauen Sie sich zunächst die Syntax an: Funktionsname.apply(Objekt, Parameterarray);

Die Syntax hier ist ziemlich unklar, also verwenden wir Beispiele zur Veranschaulichung:

1. Erstellen Sie zwei neue js-Dateien, nämlich „js1.js“ und „js2.js“;

2. Code hinzufügen

Code kopieren Der Code lautet wie folgt:

// In der js1.js-Datei
var func1 = function() {
this.name = "Programmer";
};
func1.apply(null); 🎜>alert(name);
// js2.js-Datei

var func2 = function() {
this.name = "Programmer";
};
var o = {};
func2 (o);
alert(o.name);

3. Wenn Sie zwei Codeteile ausführen, können Sie feststellen, dass das Namensattribut in der ersten Datei in das globale Objektfenster geladen wurde, während sich das Namensattribut in der zweiten Datei im eingehenden Objekt befindet , das Eine entspricht einem Funktionsaufruf und das Zweite entspricht einem Methodenaufruf.

Die Parameter hier sind die Parameter der Methode selbst, sie müssen jedoch in Form eines Arrays gespeichert werden. Zum Beispiel der Code:

Kopieren Sie die Code Der Code lautet wie folgt:

// Ein Beispiel für ein Array
var arr1 = [1,2,3,[4,5] ,[6,7,8]];
// Erweitern Sie es
var arr2 = arr1.conact.apply([], arr1);
Führen Sie dann den Anrufmodus ein und der Anwendungsmodus besteht darin, dass die Parameter im Aufruf keine Arrays verwenden. Der folgende Code verdeutlicht dies:
// Methode definieren

var func = function(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
//Objekt erstellen
var o = {};
//Mitglieder zum Objekt hinzufügen
// Modus anwenden
var p1 = func.apply(o, [" Zhao Xiaohu", 19, "Male"]);
// Anrufmodus
var p2 = func.call(o, "Zhao Xiaohu", 19, "Male");

Im obigen Code sind die Ergebnisse des Anwendungsmodus und des Aufrufmodus gleich.

Tatsächlich können Sie die Bedeutung dieser Funktionen mithilfe des Anwendungsmodus und des Aufrufmodus auf beliebige Weise steuern. Sie werden häufig im Entwurfsmodus von Funktions-JS verwendet. Zusammenfassend lässt sich sagen, dass es in js vier Modi für Funktionsaufrufe gibt, nämlich: Funktional, Methode, Konstruktor und Anwenden. In diesen Modi ist dies folgende Bedeutung: In der Funktion ist dies das globale Objektfenster, in der Methode dies bezieht sich auf das aktuelle Objekt. Im Konstruktor bezieht sich dies auf das erstellte Objekt. Im Apply-Modus kann dies beliebig angegeben werden. Wenn im Apply-Muster null verwendet wird, handelt es sich um ein Funktionsmuster, und wenn ein Objekt verwendet wird, handelt es sich um ein Methodenmuster.

5. Ausführliche Beispiele

Beenden wir diesen Artikel mit einem Fall. Fallbeschreibung: Es gibt ein Div mit der ID dv. Wenn die Maus darüber bewegt wird, wird die Höhe direkt wiederhergestellt:

Code kopieren Der Code lautet wie folgt:

var dv = document.getElementById("dv");
var height = parseInt(dv.style.height || dv.offsetHeight);
var IntervalId;
dv.onmouseover = function() {
// Stoppen Sie die Animation, die bereits ausgeführt wird
clearInterval(intervalId);
// Holen Sie sich die Zielhöhe
var toHeight = height * 2;
// Get das aktuelle Objekt
var that = this;
// Timer starten, langsam ändern
IntervalId = setInterval(function() {
// Aktuelle Höhe abrufen
var height = parseInt( dv. style.height ||. dv.offsetHeight);
                                                                      jedes Mal                           Bestimmen Sie die Änderung und stoppen Sie den Timer, wenn die Schrittgröße 0 ist
if( h > 0 ) {
) "px";
} else {
                                                                                                                // Das Prinzip ist das gleiche wie zuvor
clearInterval(intervalId);
var toHeight = height;
var that = this;
IntervalId = setInterval(function() {
var height = parseInt(dv .style.height || dv.offsetHeight);
var h = Math.ceil(Math.abs(height - toHeight) / 10);
if( h > 0 ) {
that.style .height = (height - h) "px";
    } else {
                                                                        🎜>