Eingehende Analyse der Deklaration und des Aufrufs von benutzerdefinierten JS-Funktionen

Eine Funktion ist eine Reihe wiederverwendbarer Codeblöcke, die eine bestimmte Aufgabe ausführen (eine bestimmte Funktion haben). Zusätzlich zur Verwendung integrierter Funktionen können wir auch eigene Funktionen (benutzerdefinierte Funktionen) erstellen und diese Funktion dann bei Bedarf aufrufen. Dies vermeidet nicht nur das Schreiben wiederholten Codes, sondern erleichtert auch die spätere Wartung des Codes.

Eins: Mehrere Möglichkeiten, Funktionen zu deklarieren

Es gibt drei Möglichkeiten, benutzerdefinierte Funktionen in JavaScript zu deklarieren, nämlich die Verwendung von Funktionsanweisungen, die Verwendung von Function()-Konstruktoren und die Definition von Funktionsliteralen.

1. Funktionsanweisung

In JavaScript können Sie die Funktionsanweisung zum Deklarieren von Funktionen verwenden. Die spezifische Verwendung ist wie folgt:

function funName([args]) {
    statements
}

funName ist der Funktionsname, der wie der Variablenname ein zulässiger JavaScript-Bezeichner sein muss. Nach dem Funktionsnamen folgt eine Liste von Parametern, die in Klammern eingeschlossen und durch Kommas getrennt sind. Parameter sind optional und die Anzahl ist unbegrenzt.

Als Bezeichner wird auf Parameter nur innerhalb des Funktionskörpers zugegriffen, und Parameter sind private Mitglieder des Funktionsbereichs. Übergeben Sie beim Aufrufen einer Funktion einen Wert an die Funktion, verwenden Sie dann Parameter, um den extern übergebenen Wert zu erhalten, und greifen Sie in die Ausführung der Funktion innerhalb des Funktionskörpers ein.

Nach den Klammern steht eine geschweifte Klammer. Die in der geschweiften Klammer enthaltene Aussage ist der Hauptinhalt der Funktionskörperstruktur. Im Funktionskörper sind geschweifte Klammern unerlässlich. Ohne geschweifte Klammern löst JavaScript einen Syntaxfehler aus.

Beispiel

Die Funktionsanweisung muss den Funktionsnamen sowie Klammern und Klammern enthalten. Andere Codes können weggelassen werden, sodass der einfachste Funktionskörper eine leere Funktion ist.

function funName() {}  //空函数

Wenn Sie anonyme Funktionen verwenden, können Sie den Funktionsnamen weglassen.

function () {}  //匿名空函数

Die var-Anweisung und die Funktionsanweisung sind beide Deklarationsanweisungen. Die von ihnen deklarierten Variablen und Funktionen werden beim Vorkompilieren von JavaScript analysiert, was auch als Variablenheraufstufung und Funktionsheraufstufung bezeichnet wird. Während der Vorkompilierungsphase erstellt die JavaScript-Engine einen Kontext für jede Funktion, definiert ein Variablenobjekt und registriert alle formalen Parameter, privaten Variablen und verschachtelten Funktionen in der Funktion als Attribute für das Variablenobjekt.

2. Function()-Konstruktor

Verwenden Sie den Function()-Konstruktor, um schnell Funktionen zu generieren. Die spezifische Verwendung ist wie folgt: Die Parametertypen von

var funName = new Function(p1, p2, ..., pn, body);

Function () sind alle Zeichenfolgen, p1 ~ pn stellt die Parameternamenliste der erstellten Funktion dar, body stellt die Funktionsstrukturanweisung der erstellten Funktion dar und die Body-Anweisungen sind durch Semikolons getrennt.

Beispiel 1

Sie können alle Parameter weglassen und nur eine Zeichenfolge übergeben, um den Funktionskörper darzustellen.

var f = new Function ("a", "b", "return a+b");  //通过构造函数来克隆函数结构

Im obigen Code ist f der Name der erstellten Funktion. Es wird dieselbe Funktion definiert, und Funktionen mit derselben Struktur können mithilfe der Funktionsanweisung entworfen werden.

function f(a, b) {  //使用function语句定义函数结构
    return a + b;
}

Beispiel 2

Verwenden Sie den Function()-Konstruktor, um eine leere Funktionsstruktur zu erstellen, ohne Parameter anzugeben.

var f = new Function();  //定义空函数

Mit dem Function()-Konstruktor können Funktionen dynamisch erstellt werden. Er beschränkt Benutzer nicht auf den durch die Funktionsanweisung vorab deklarierten Funktionskörper. Durch die Verwendung des Function()-Konstruktors kann die Funktion als Ausdruck und nicht als Struktur verwendet werden, sodass sie flexibler einsetzbar ist. Der Nachteil besteht darin, dass der Function()-Konstruktor während der Ausführung kompiliert wird, die Ausführungseffizienz sehr gering ist und seine Verwendung im Allgemeinen nicht empfohlen wird.

3. Anonyme Funktion (Funktionsliteral)

Funktionsliteral wird auch als anonyme Funktion bezeichnet, das heißt, die Funktion hat keinen Funktionsnamen und enthält nur das Funktionsschlüsselwort, Parameter und den Funktionskörper. Die spezifische Verwendung ist wie folgt:

function ([args]) {
    statements
}

Beispiel 1

Der folgende Code definiert ein Funktionsliteral.

function (a, b) {  //函数直接量
    return a + b;
}

Im obigen Code sind Funktionsliterale grundsätzlich dasselbe wie die Verwendung von Funktionsanweisungen zum Definieren von Funktionsstrukturen, und ihre Strukturen sind festgelegt. Das Funktionsliteral gibt jedoch keinen Funktionsnamen an, sondern verwendet direkt das Schlüsselwort function, um die Struktur der Funktion darzustellen. Diese Art von Funktion wird auch als anonyme Funktion bezeichnet.

Beispiel 2

Eine anonyme Funktion ist ein Ausdruck, also ein Funktionsausdruck, keine Aussage über die Funktionsstruktur. Als nächstes weisen Sie der Variablen f die anonyme Funktion als Wert zu.

//把函数作为一个值直接赋值给变量 f
var f = function (a, b) {
    return a + b;
};

Wenn die Funktionsstruktur einer Variablen als Wert zugewiesen wird, kann die Variable als Funktion aufgerufen werden und die Variable zeigt auf die anonyme Funktion.

console.log(f(1,2));  //返回值3

Beispiel 3

Anonyme Funktionen dienen als Werte und können an komplexeren Ausdrucksoperationen teilnehmen. Für das obige Beispiel können Sie den folgenden Code verwenden, um den integrierten Vorgang der Funktionsdefinition und des Funktionsaufrufs abzuschließen.

console.log(  //把函数作为一个操作数进行调用
    (function (a,b) {
        return a + b;
    })(1, 2));  //返回数值3

4. Pfeilfunktion

Die Pfeilfunktion ist die Abkürzung der Funktion in es6. Diese wird bei der Definition bestimmt ist das der vorherigen Schicht.

//箭头函数
const sayName = ()=>{
    console.log("箭头函数")
}

二：调用函数

一旦定义好了一个函数，我们就可以在当前文档的任意位置来调用它。调用函数非常简单，只需要函数名后面加上一个括号即可，例如 alert()、write()。注意，如果在定义函数时函数名后面的括号中指定了参数，那么在调用函数时也需要在括号中提供对应的参数。

示例代码如下：

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('PHP中文网');

提示：JavaScript 对于大小写敏感，所以在定义函数时 function 关键字一定要使用小写，而且调用函数时必须使用与声明时相同的大小写来调用函数。

【相关推荐：javascript学习教程】

Das obige ist der detaillierte Inhalt vonEingehende Analyse der Deklaration und des Aufrufs von benutzerdefinierten JS-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!