JS Leicht verständliche Funktion und Konstruktor

1. Übersicht

Function ist ein Konstruktor, mit dem eine Funktion erstellt werden kann. Die erstellte Funktion ist ein Funktionsobjekt. Tatsächlich ist es ein Funktionsobjekt, unabhängig davon, welche Methode zum Erstellen verwendet wird. Im Wesentlichen ist der Funktionsname nur ein Variablenname, der auf einen Verweis auf ein Funktionsobjekt verweist.

Der Bestätigungscode lautet wie folgt:

var f = Funktion () {
  console.log('das ist die f-Funktion');
}
// Eine Funktion ist auch ein Objekt console.log(f instanceof Object); // true
// Funktion ist ein Objekt vom Typ Functionconsole.log(f instanceof Function); // true

1.1 Erstellen einer Funktion mit dem Funktionskonstruktor

Function **** Der Konstruktor erstellt ein neues Funktionsobjekt. Durch den direkten Aufruf dieses Konstruktors können Funktionen dynamisch erstellt werden.

Die grammatische Struktur ist wie folgt:

var Funktionsname = neue Funktion ([arg1[, arg2[, ...argN]],] Funktionstext)

Dabei steht functionName für den Funktionsnamen, [arg1[, arg2[, ...argN]],] für die Liste der optionalen Parameter und functionBody für die Funktion.

Der Beispielcode lautet wie folgt:

// Funktion ohne Parameter var fun = new Function('console.log("Dies ist eine Funktion")')
fun() // Dies ist eine Funktion // Eine Funktion mit einem Parameter var fun = new Function('a', 'console.log("Diese Funktion nimmt einen Parameter an: " + a)')
fun(100) // Diese Funktion benötigt einen Parameter: 100
// Funktion mit zwei Parametern var fun = new Function(
  'a, b',
  'console.log("Dies ist eine Funktion mit zwei Parametern, " + a + " und " + b);',
)
fun(100, 200) // Dies ist eine Funktion mit zwei Parametern, 100 und 200

In der tatsächlichen Entwicklung verwenden wir diese Methode im Allgemeinen nicht zum Erstellen von Funktionen, da sie überhaupt nicht lesbar ist.

1.2Funktion und Gegenstand

• Object und Function sind einer der Referenztypen in JavaScript
• Konstruktor ist auch eine Art Funktion
• Eine Funktion ist eigentlich ein Objekt vom Typ Funktion
• Alle Objekte in JavaScript sind vom Typ „Objekt“.

Der Bestätigungscode lautet wie folgt:

console.log(Funktionsinstanz der Funktion) //true
console.log(Funktionsinstanz des Objekts) //true
console.log(Objektinstanz von Objekt) //true
console.log(Objektinstanz der Funktion) //true

2. Konstruktor

2.1 Benutzerdefinierte „Andernfalls“-Funktion

Ein Konstruktor, auch als Konstruktor- oder Objektvorlage bezeichnet, ist eine Methode in einem Objekt, die bei der Instanziierung aufgerufen wird. In JavaScript können Funktionen als Konstruktoren verwendet werden, es ist daher nicht erforderlich, eine Konstruktormethode speziell zu definieren.

Die Syntax zum Erstellen eines Konstruktors lautet wie folgt:

Funktion Person(){
  this.property name = Eigenschaftswert;
  dieser.Methodenname = Funktion() {
      Methodenkörper}
var person = neue Person();

Hier ist Person der Name des Konstruktors. Um Person zu instanziieren, müssen Sie das neue Schlüsselwort verwenden. Erwähnenswert ist auch, dass der erste Buchstabe des Konstruktors im Allgemeinen groß geschrieben wird.

Der folgende Code zeigt, wie ein Konstruktor erstellt und wie eine Klasse über den Konstruktor instanziiert wird:

// Benutzerdefinierter Konstruktor -> Funktion: Objektfunktion Person (Name, Alter, Geschlecht) erstellen {
  dieser.name = Name
  this.age = Alter
  das.geschlecht = geschlecht
  dies.drucken = Funktion () {
    console.log(Name + „dieses Jahr“ + Alter + „Alter und Geschlecht“ + Geschlecht)
  }
}
// Erstelle eine Schale mit Süßigkeiten var t = new Person('eine Schale mit Süßigkeiten', 18, 'weiblich')
hong.print() // Yiwantian ist 18 Jahre alt und weiblich // Erstelle Yiwanzhou var z = new Person('Yiwanzhou', 20, 'männlich')
dong.print() //Eine Schüssel Haferbrei, 20 Jahre alt, männlich

2.2 Konstruktoreigenschaft eines Objekts

constructor vom Object -Objekt bereitgestellte Konstruktoreigenschaft gibt eine Referenz auf den Konstruktor zurück, der das Instanzobjekt Object erstellt.

Alle Objekte erben eine Konstruktoreigenschaft von ihrem Prototyp:

Es ist wichtig zu beachten, dass der Wert dieser Eigenschaft ein Verweis auf die Funktion selbst ist und nicht eine Zeichenfolge, die den Funktionsnamen enthält.

Der Beispielcode lautet wie folgt:

// Yiwan Zhou erstellen var z = neue Person('Yiwan Zhou', 18, 'Männlich')
// Überprüfen, ob es sich um das Objekt des Personenkonstruktors handelt console.log(z.constructor === Person)

2.3 Konstruktoren und Funktionen

Schauen wir uns zunächst einen Codeabschnitt an

Funktion Held() {
  // Als Funktion verwenden var v = 100 // Lokale Variable // Als Konstruktor verwenden this.set = function (value) {
    v = Wert
  }
  dies.get = Funktion () {
    zurückgeben v
  }
}

In diesem Code definieren wir zuerst eine Funktion, die auch ein Konstruktor ist und natürlich immer noch ein Objekt.

Da es drei Bedeutungen hat, gibt es drei Operationen, wie unten gezeigt

• Rufen Sie es direkt als Funktion auf
• Erstellen von Objekten durch Konstruktoren
• Behandeln Sie es als Objekt und fügen Sie ihm Eigenschaften oder Methoden hinzu

Der Beispielcode lautet wie folgt:

// Hero() direkt aufrufen
// Erstelle ein Objekt durch den Konstruktor var hero = new Hero()
// Behandle es als Objekt und füge Eigenschaften und Methoden hinzu Hero.n = ‚Eine Schüssel Zhou‘
console.log(Hero.n) // Eine Schüssel Zhou

3. Eigenschaften und Methoden von Funktionsobjekten

Das globale Function verfügt nicht über eigene Eigenschaften und Methoden. Da es jedoch auch eine Funktion ist, erbt es über die Prototypenkette auch einige Eigenschaften und Methoden von seiner eigenen Prototypenkette Function.prototype.

3.1Längenattribut

Das Längenattribut gibt die Anzahl der formalen Parameter der Funktion an. Der Beispielcode lautet wie folgt:

// Definiere zwei leere Funktionen function fun(a, b, c, d) {}

Funktion fn() {}

// Testen Sie die Längeneigenschaft console.log(fun.length) // 4
console.log(fn.length) // 0

apply()-Methode:

Die Methode apply() ruft eine Funktion mit einem gegebenen this-Wert und Argumenten auf, die als Array (oder arrayähnliches Objekt) bereitgestellt werden.

Das Syntaxformat ist wie folgt:

Funktion.apply(diesesArg, [argsArray])

Die Parameter werden wie folgt erklärt:

• thisArg : Erforderlich. Der this-Wert, der verwendet werden soll, wenn die func-Funktion ausgeführt wird. Beachten Sie, dass dies möglicherweise nicht der tatsächliche Wert ist, der von der Methode angezeigt wird: Wenn sich die Funktion im nicht strikten Modus befindet, wird jede Zuweisung von „null“ oder „undefiniert“ automatisch durch einen Verweis auf das globale Objekt ersetzt, wobei der primitive Wert umschlossen wird.
• argsArray : Optional. Ein Array oder arrayähnliches Objekt, dessen Array-Elemente als separate Parameter an die Funktion func übergeben werden. Wenn der Wert dieses Parameters null oder undefiniert ist, bedeutet dies, dass kein Parameter erforderlich ist. Array-ähnliche Objekte sind seit ECMAScript 5 verfügbar.

Der Rückgabewert ist das Ergebnis des Aufrufs der Funktion mit dem angegebenen „this“-Wert und den angegebenen Argumenten.

Der folgende Code zeigt die Verwendung der Methode apply():

// definiere eine Funktion function fn(a) {
  console.log('das ist ' + a)
}
fn.apply(null, ['function']) // dies ist eine Funktion // Der obige Aufruf entspricht der folgenden Methode fn('function') // dies ist eine Funktion

3.2call()-Methode

Die Syntax und Funktion dieser Methode ähneln der Methode apply() , mit einem Unterschied: Die Methode call() akzeptiert eine Parameterliste, während apply() ein Array mit mehreren Parametern akzeptiert.

Der folgende Code zeigt die Verwendung der call()-Methode:

Funktion fn(a) {
  console.log('das ist ' + a)
}
fn.call(null, 'function') // dies ist eine Funktion // Der obige Aufruf entspricht der folgenden Methode fn('function') // dies ist eine Funktion

bind()-Methode:
Die Methode ind() erstellt eine neue Funktion. Wenn bind() aufgerufen wird, wird this der neuen Funktion als erster Parameter von bind() angegeben und die verbleibenden Parameter werden als Parameter der neuen Funktion für den Aufruf verwendet.

Die Parameter werden wie folgt erklärt:

Funktion.binden(thisArg[, arg1[, arg2[, ...]]])

Parameter:

thisArg : Der Wert, der an die Zielfunktion als this-Argument übergeben wird, wenn die gebundene Funktion aufgerufen wird.

arg1 , arg2 , …: Argumente, die der Argumentliste der gebundenen Funktion vorangestellt werden, wenn die Zielfunktion aufgerufen wird.

Der Rückgabewert ist eine Kopie der ursprünglichen Funktion mit dem angegebenen **this**-Wert und den Anfangsparametern.

Der folgende Code zeigt die Methode bind():

// Definiere eine Funktion var fun = function (a, b) {
  console.log('Der Wert des ersten Parameters ist:' + a + 'Der Wert des zweiten Parameters ist:' + b)
}
// Rufe fun() auf
fun(10, 20) // Der Wert des ersten Parameters ist: 10 Der Wert des zweiten Parameters ist: 20
// Erstelle eine gebundene Funktion var fn = fun.bind(null, 100, 200) // Funktion mit Standardparameterwerten // Rufe die neu erstellte Funktion auf, ohne tatsächliche Parameter zu schreiben fn() // Der Wert des ersten Parameters ist: 100 Der Wert des zweiten Parameters ist: 200

4. Arguments-Objekt

arguments Argumentobjekt ist eine lokale Variable, die in allen (nicht-Pfeil-)Funktionen verfügbar ist. Sie können mithilfe des Argumentobjekts innerhalb einer Funktion auf Funktionsargumente verweisen. Dieses Objekt enthält jedes an die Funktion übergebene Argument, wobei sich das erste Argument am Index 0 befindet. Wenn einer Funktion beispielsweise drei Parameter übergeben werden, können Sie diese wie folgt referenzieren:

Argumente[0]
Argumente[1]
Argumente[2]

Seine Parameter können auch neu definiert werden. Das Objekt bietet außerdem zwei Eigenschaften:

• arguments.length : Gibt die Anzahl der an die Funktion übergebenen Argumente zurück
• arguments.callee : Gibt einen Zeiger auf die aktuell ausgeführte Funktion zurück, zu der die Argumente gehören. Wenn auf diese Eigenschaft ein () folgt, bedeutet dies, dass diese Funktion aufgerufen wird, da arguments.callee === fun als „true“ ausgewertet wird.

Der folgende Code zeigt die Verwendung dieses Objekts. Der Code lautet wie folgt:

/*
 * Das Argumentobjekt ist ein spezielles Objekt, das sich im Funktionskörper befindet.
 * Das Argumentobjekt ist ein arrayähnliches Objekt. * Das Argumentobjekt entspricht den tatsächlichen Parametern, die an die Funktion übergeben werden. */
// Definiere eine Funktion var fun = function () {
  console.log(Argumente)
  // arguments.callee zeigt auf die aktuell ausgeführte Funktion, zu der die Argumente gehören.
  //Wenn Sie dieser Eigenschaft eine Klammer hinzufügen, bedeutet dies einen Aufruf. Weil arguments.callee === fun als true ausgewertet wird
  console.log(Argumente.Angerufener)
  // arguments.length Die Anzahl der an die Funktion übergebenen Argumente.
  console.log(Argumente.Länge)
}
Spaß (1, 2, 3, 4, 5) 

Die Ergebnisse der Codeausführung sind wie folgt:

[Argumente] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
[Funktion: Spaß]
5

Wir können die Eigenschaft arguments.length verwenden, um die Anzahl der übergebenen Parameter zu bestimmen, um die Funktionsüberladung abzuschließen. Der Beispielcode lautet wie folgt:

// Überladung der Simulationsfunktion function add() {
  // Anzahl der Parameter aufzeichnen var len = arguments.length
  //Verwende die switch case-Anweisung, um die Anzahl der übergebenen Parameter zu bestimmen und so den überladenen Funktionsschalter (len) zu simulieren {
    Fall 2:
      Rückgabeargumente[0] + Argumente[1]
      brechen
    Fall 3:
      Rückgabeargumente[0] + Argumente[1] + Argumente[2]
      brechen
    Fall 4:
      Rückgabeargumente[0] + Argumente[1] + Argumente[2] + Argumente[3]
      brechen

    Standard:
      brechen
  }
}
konsole.log(add(1, 2)) // 3
konsole.log(add(1, 2, 3)) // 6
console.log(add(1, 2, 3, 4)) // 10

5. Zusammenfassung

In diesem Artikel wird erläutert, wie ein Konstruktor erstellt wird, wie ein Objekt über einen Konstruktor instanziiert wird und welche Methoden und Eigenschaften das Funktionsobjekt bereitstellt. Wie man es verwendet und schließlich ein Argumentsobjekt einführt.

Dies ist das Ende dieses Artikels über JS-Funktionen und -Konstruktoren. Weitere relevante Inhalte zu JS-Funktionen und -Konstruktoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!