Detaillierte Erläuterung der Einführung in die JavaScript-Funktion

Detaillierte Erläuterung der Einführung in die JavaScript-Funktion

Funktionseinführung

Funktion

  • Eine Funktion ist auch ein Objekt
  • Eine Funktion ist eine Kapselung von n Anweisungen, die Funktionen implementieren und bei Bedarf jederzeit aufgerufen werden können.
  • Funktionen können ausgeführt werden, andere Datentypen können nicht ausgeführt werden
  • Wenn Sie typeof verwenden, um ein Funktionsobjekt zu überprüfen, gibt es die Funktion zurück

Vorteil:

  • Verbessern Sie die Wiederverwendung von Code
  • Leicht zu lesen und zu kommunizieren

Erstellen einer Funktion

Konstruktor erstellt eine Funktion

Grammatik

var fun = neue Funktion (Codeblock);

Es gibt relativ wenige Funktionen, die in dieser Form konstruiert sind.

Eine Funktionsdeklaration erstellt eine Funktion

Grammatik:

Funktion Funktionsname (Parameter 1, Parameter 2... Parameter N) {
    Stellungnahme...
}

Funktionsausdrücke Funktionen erstellen

var Funktionsname = Funktion Funktionsname (Parameter 1, Parameter 2 ... Parameter N) {
    Stellungnahme...
}

Funktionsparameter

Formale Parameter:

  • Geben Sie einen oder mehrere Parameter in () der Funktion an
  • Mehrere Parameter werden durch getrennt, und das Deklarieren eines Parameters entspricht dem Deklarieren der entsprechenden Variable innerhalb der Funktion, es wird jedoch kein Wert zugewiesen.

Tatsächliche Parameter:

  • Beim Aufruf einer Funktion können Sie die tatsächlichen Parameter in () angeben.
  • Die Aktualparameter werden den entsprechenden Formalparametern in der Funktion zugewiesen.
  • Beim Aufrufen einer Funktion überprüft der Parser nicht den Typ des tatsächlichen Parameters (achten Sie also darauf, ob möglicherweise ungültige Parameter empfangen werden, und überprüfen Sie in diesem Fall den Typ der Parameter).
Funktion Summe(a, b) {
    konsole.log(a + b);
}
sum(1, 2); //Funktion aufrufen und aktuelle Parameter übergeben 

Bildbeschreibung hier einfügen

Anzahl der Parameter:

  • Die Anzahl der tatsächlichen und formalen Parameter einer Funktion kann unterschiedlich sein
  • A. Die Anzahl der tatsächlichen Parameter ist größer als die Anzahl der formalen Parameter: Die Funktion wird normal ausgeführt und die zusätzlichen tatsächlichen Parameter werden ignoriert
  • B. Die Anzahl der tatsächlichen Parameter ist kleiner als die Anzahl der formalen Parameter: Die zusätzlichen formalen Parameter werden zu undefinierten Variablen

Frage : Werden variable Parameter beim Aufrufen einer Funktion in JavaScript als Wert oder als Referenz übergeben?

  • Verständnis 1: Alle sind Wertübertragungen (Basis-/Adresswerte)
  • Verständnis 2: Es kann sich um eine Überweisung oder eine Referenzüberweisung (Adresswert) handeln.
var a = 3;
Funktion fn(a) {
    a = a + 1;
}
fn(a);
console.log("a ist:", a); // 3

Bildbeschreibung hier einfügen

Hier kann es als Werttransfer (Basistransfer) verstanden werden

var obj = { name: "Objekt" }; // deklariere eine Objektfunktion fn(obj) {
    konsole.log(Objektname);
}
fn(obj); // "Affenherz"
// Dies kann als Adresswertübertragung oder Referenzübertragung (Adresswert) verstanden werden.

Bildbeschreibung hier einfügen

Funktionsaufruf

Direktanruf:

函數名()

Funktion fn(Objekt) {
    console.log("Ich wurde direkt angerufen!");
}
fn()//direkter Aufruf 

Bildbeschreibung hier einfügen

Aufruf über Objekt

obj.函數名()

Obj = {
    Spaß(){
        console.log("Ich habe es über ein Objekt aufgerufen!");
    }
}
Obj.fun(); //Funktion über Objekt aufrufen 

Bildbeschreibung hier einfügen

Neuer Anruf

new fun()

Funktion Spaß() {
    console.log("Ich habe es über new aufgerufen!");
    return 1 + 2; // gib einen Wert zurück }
var Ergebnis = neuer Spaß();
console.log("Ergebnis:", Ergebnis);//Spaß {}
console.log("Datentyp des Ergebnisses:", Ergebnistyp);//"Objekt"

Bildbeschreibung hier einfügen

Beachten:

1. Eine mit new aufgerufene Funktion erhält immer ein Objekt, unabhängig davon, ob die Funktion einen Wert zurückgibt oder nicht.

2. Verwenden Sie new, um eine Funktion aufzurufen, mit der ein Objekt erstellt wird (Konstruktor).

fun.call/apply(obj)

Dies ist eine temporäre Methode, um Spaß zu einem Anrufobjekt zu machen

var obj = { name: "Objekt" }; // deklariere eine Objektfunktion fun() {
    dieses.Alter = 5000;
    console.log("Rufen Sie die Funktion über fun.call(obj) auf!");
}
//Kann nicht direkt über obj.fun() aufgerufen werden, aber über fun.call(obj) fun.call(obj) //Entspricht obj.fun
//Drucken Sie die von fun.call(obj) aufgerufene Funktion aus!
console.log("Sie können es auch als Methode von obj verwenden, um Altersinformationen abzurufen" + "age:", obj.age); //5000

Bildbeschreibung hier einfügen

Rückgabewert der Funktion

Eine Funktion kann einen Rückgabewert haben oder nicht.

  • Funktion mit Rückgabewert: Der Funktionskörper gibt über die Return-Syntax einen Wert zurück, der den nächsten Schritt des Programms bestimmt
  • Funktion ohne Rückgabewert: Die Funktion implementiert nur eine bestimmte Funktion und muss keinen Wert zurückgeben (im Funktionskörper gibt es keine Return-Anweisung).
  • Der Rückgabewert kann von jedem beliebigen Datentyp sein, einschließlich primitiver Datentypen, Objekte und Funktionen.

Funktion sofort ausführen

Nachdem die Funktion definiert wurde, wird sie sofort aufgerufen. Diese Art von Funktion wird als sofort ausgeführte Funktion bezeichnet.

Sofort ausgeführte Funktionen werden normalerweise nur einmal ausgeführt.

Grammatik:

(Funktion(){
	Codeblöcke;
})();

Zum Beispiel:

(Funktion (a, b) {
    Konsole.log("num:", a + b);
})(1,3);//4

Bildbeschreibung hier einfügen

Verfahren

  • Eine Eigenschaft in einem Objekt kann eine Funktion sein
  • Wenn eine Funktion als Eigenschaft eines Objekts gespeichert ist. Dann nennen wir diese Funktion eine Methode dieses Objekts
  • Der Aufruf dieser Funktion entspricht dem Aufruf der Methode des Objekts und unterscheidet sich im Wesentlichen nicht von einer Funktion.
var obj = neues Objekt()
{
    obj.name = "Affenherz";
    Objekt.Alter = 3000;
    obj.sayName = Funktion(){
        Konsole.log("Name:",Objekt.Name);
    }
}
obj.sayName();

Bildbeschreibung hier einfügen

Eine andere Schreibweise:

var obj = {
    Name: "Yima",
    Alter: 3000,
    sageName: Funktion () {
        Konsole.log("Name:", Objekt.Name);
    }
}
obj.sayName();

Bildbeschreibung hier einfügen

So listen Sie die Eigenschaften in einem Objekt auf:

Sie können meinen Artikel über die Unterschiede zwischen verschiedenen Durchlaufmethoden lesen: Vergleich der Unterschiede zwischen for, forEach, for...in und for...of in JavaScript

Verwenden for...in Anweisung

Grammatik

für (var index in arr)
{
    konsole.log(index); //Codeblock}

for ...in Anweisungsobjekt hat mehrere Attribute, und der Schleifenkörper wird mehrmals ausgeführt. Bei jeder Ausführung wird der Variablen der Name eines Attributs im Objekt zugewiesen.

Bildbeschreibung hier einfügen

var Person = {
    Name: „Sun Wukong“,
    Alter: 5777,
    Geschlecht: „Männlich“
};
für (var Index in Person)
{
    Konsole.log(Person[Index]);
}

Umfang

Der Gültigkeitsbereich bezieht sich auf den Bereich einer Variablen.

In JavaScript gibt es zwei Arten von Bereichen:

1. Globaler Geltungsbereich (globale Variablen)

2. Funktionsumfang (lokale Variablen)

3. Block-Level-Bereich ES6 Syntax

Globaler Umfang

  • Variablen, die außerhalb oder innerhalb einer Funktion definiert sind, ohne die var-Deklaration zu verwenden.
  • Der globale Bereich wird beim Öffnen der Browserseite erstellt und beim Schließen der Seite zerstört.
  • Es gibt ein globales Objektfenster im globalen Bereich
  • Es stellt ein Browserfenster dar
  • Es stellt ein Browserfenster dar, das vom Browser erstellt wird und das wir direkt verwenden können
  • Wenn Sie dieses globale Objektfenster in einer Node.js-Umgebung verwenden, wird ein Fehler gemeldet und das Ergebnis nur in einem Browser angezeigt.
  • Im globalen Umfang:
    • Die erstellten Variablen werden als Attribute des Fensterobjekts gespeichert
    • Die erstellten Funktionen werden als Methoden des Fensterobjekts gespeichert
  • Variablen im globalen Bereich sind globale Variablen
  • Sie können von jedem Teil der Seite darauf zugreifen

Variablen werden als Attribute des Fensterobjekts gespeichert

var a = 10;
Konsole.log("a:",a);
Konsole.log("Fenster.a:",Fenster.a);

Aus Umweltgründen wird in node.js ein Fehler gemeldet

Bildbeschreibung hier einfügen

Es wird normal im Browser angezeigt

Bildbeschreibung hier einfügen

Funktionen werden als Methoden des Fensterobjekts verwendet

Funktion Spaß () {
   console.log("Ich bin die window.fun-Funktion!")
}
fenster.spaß();

Bildbeschreibung hier einfügen

Funktionsumfang

  • Der Funktionsumfang wird beim Aufruf der Funktion erstellt und nach der Ausführung der Funktion zerstört.
  • Bei jedem Aufruf einer Funktion wird ein neuer Funktionsumfang erstellt und diese sind voneinander unabhängig.
  • Auf Variablen im globalen Gültigkeitsbereich kann im Funktionsbereich zugegriffen werden
  • Wenn ein Funktionsumfang eine Variable bearbeitet, sucht er in seinem eigenen Umfang danach. Wenn sie gefunden wird, wird sie direkt verwendet. Wenn sie im globalen Umfang immer noch nicht gefunden wird, wird ReferennceError gemeldet.
  • Um auf globale Variablen in einer Funktion zuzugreifen, können Sie das Fensterobjekt verwenden

Blockbereich

Mit let deklarierte ES6-Variablen (ECMAScript 2016) sind auf den Anweisungsblock beschränkt.

für (lass i = 0; i < 100; i++) {
			}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung dieser Zeigerfunktion in JS
  • Erläuterung der JavaScript-Funktionssyntax
  • Detaillierte Erklärung zur Verwendung der Vue.js-Renderfunktion
  • JavaScript-Grundlagenreihe: Funktionen und Methoden
  • Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden
  • Beispiel für die JavaScript-Funktion „CollectGarbage“

<<:  4 Möglichkeiten zur Optimierung von MySQL-Abfragen für Millionen von Daten

>>:  Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset

Artikel empfehlen

Basierend auf den Sonderzeichen in der URL-Escape-Kodierung

Inhaltsverzeichnis Sonderzeichen in URLs Escapeze...

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Das img-Tag in XHTML sollte wie folgt geschrieben...

Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst

Was ist eine große Sache? Transaktionen, die über...

Einführung in CSS-Stileinführungsmethoden und ihre Vor- und Nachteile

Drei Möglichkeiten, CSS einzuführen 1. Inline-Sti...

JavaScript implementiert eine einzelne verknüpfte Listenprozessanalyse

Vorwort: Zum Speichern mehrerer Elemente sind Arr...

Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild

FileReader ist eine wichtige API für die Frontend...

Perfekte Lösung für das Problem des CSS-Hintergrundbildpfads im Webpack

Innerhalb des Style-Tags der Vue-Komponente befin...

Detaillierte Erklärung zur Erstellung von Schießspielen mit CocosCreator

Inhaltsverzeichnis Szeneneinstellung Spielressour...

Detaillierte Erklärung der Befehle zum Anzeigen von Linux-Dateien

So zeigen Sie Linux-Dateien an Befehl zum Anzeige...

MySQL-Onlineprobleme mit langsamem Log und Optimierungslösungen

Das MySQL-Slow-Log ist ein Informationstyp, auf d...

Detaillierte Erläuterung der Kommentare zu gespeicherten MySQL-Prozeduren

Inhaltsverzeichnis 1. Gebrauchsanweisung 2. Vorbe...

Installieren Sie MySQL 5.7 unter Ubuntu 18.04

Dieser Artikel wurde unter Bezugnahme auf die off...

Detailliertes Tutorial zur Überwachung von Nginx/Tomcat/MySQL mit Zabbix

Inhaltsverzeichnis Zabbix überwacht Nginx Zabbix ...