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

Lösung für das Problem, dass der Docker-Container nicht gestoppt werden kann

Die Lösung lautet wie folgt: 1. Container löschen...

Erläuterung unveränderlicher Werte in React

Inhaltsverzeichnis Was sind unveränderliche Werte...

Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3

Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...

Tutorial zur Installation der DAMO-Datenbank auf Centos7

1. Vorbereitung Nach der Installation des Linux-B...

WeChat-Applet implementiert SMS-Login in Aktion

Inhaltsverzeichnis 1. Vorschau der Schnittstellen...

JavaScript-Grundlagenoperatoren

Inhaltsverzeichnis 1. Betreiber Zusammenfassen 1....

Implementierung der automatischen Konstruktionsweiterleitung von React

Inhaltsverzeichnis Sequenz 1. Zentralisiertes Rou...

So installieren Sie vncserver in Ubuntu 20.04

Ubuntu 20.04 wurde im April 2020 offiziell veröff...

Docker-Einstellung für den Windows-Speicherpfadvorgang

Wenn Sie Docker unter Windows 10 installieren und...

Kreatives „Über uns“-Webseitendesign

Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...

Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout

Dieser Artikel stellt das Flex-Layout vor, um ein...

Schritte zur Methode „Mysql-Abfragedatenbankkapazität“

Abfrage der Gesamtgröße aller Datenbanken So geht...