Die Verbindung zwischen JavaScript-Konstruktoren und Prototypen

1. Konstrukteure und Prototypen

1. Konstruktor

Ein Konstruktor ist eine spezielle Funktion, die hauptsächlich zum Initialisieren eines Objekts verwendet wird, d. h. zum Zuweisen von Anfangswerten zu den Mitgliedsvariablen des Objekts. Er wird immer mit new verwendet. Wir können einige allgemeine Eigenschaften und Methoden aus dem Objekt extrahieren und sie in diese Funktion kapseln.
In JS,

Bei der Verwendung des Konstruktors sind folgende zwei Punkte zu beachten:

• Der Konstruktor wird zum Erstellen eines bestimmten Objekttyps verwendet und sein erster Buchstabe sollte groß geschrieben werden.
• Konstruktoren sind nur in Verbindung mit new sinnvoll.

Bei der Ausführung von new werden vier Dinge ausgeführt:

• Erstellt ein neues leeres Objekt im Speicher.
• Machen Sie das auf das neue Objekt aufmerksam.
• Führen Sie den Code im Konstruktor aus, um dem neuen Objekt Eigenschaften und Methoden hinzuzufügen.
• Gibt dieses neue Objekt zurück (daher ist im Konstruktor keine return erforderlich).

Einige Mitglieder können dem JavaScript Konstruktor hinzugefügt werden, entweder im Konstruktor selbst oder innerhalb des Konstruktors. Die auf diese beiden Arten hinzugefügten Mitglieder werden als statische Mitglieder bzw. Instanzmitglieder bezeichnet.
Instanzmitglieder: Innerhalb eines Konstruktors erstellte Objektmitglieder werden als Instanzmitglieder bezeichnet und können nur von instanziierten Objekten aufgerufen werden.
Statische Mitglieder: Dem Konstruktor hinzugefügte Mitglieder werden als statische Mitglieder bezeichnet und können nur vom Konstruktor selbst aufgerufen werden.

Zum Beispiel:

 Funktion A(uname,Alter){
            dies.uname = uname;
            dieses.Alter = Alter;
            dies.sagen = function() {
                console.log(diesen.uname+'hallo');
            }
        }
        var wh = new A('Wort',18);
        var xl = new A('Kleiner Bär',18);

Im obigen Code sind die hierdurch im Konstruktor hinzugefügten Methoden name , age und say allesamt Instanzmitglieder. Kann nur von instanziierten Objekten aus aufgerufen werden. Die dem Konstruktor selbst hinzugefügten Mitglieder werden als statische Mitglieder bezeichnet.

Beispiel: Erstellen Sie ein statisches Mitglied.

A.sex='weiblich';

2. Konstruktorproblem

Die Konstruktormethode ist sehr nützlich, es besteht jedoch das Problem der Speicherverschwendung

Wie unten dargestellt:

Funktion Student(Alter,Name){
            dieses.Alter = Alter;
            dieser.name = Name;
            dies.score = Funktion(){
            console.log('Die Kinder haben alle gute Noten!');
        }
        }
        console.dir(Student);
        var xl = neuer Student(18,'Kleiner Bär');
        var wh = neuer Student (17, „Student“);
        xl.score();
        wh.score();
       

Um festzustellen, ob die Adressen der beiden aufgerufenen Methoden identisch sind, verwenden Sie den folgenden Code.

 Konsole.log(xl.score === wh.score);

Das Druckergebnis ist:

Es ist ersichtlich, dass die Adressen der say-Funktion in A nicht dieselben sind, wenn sie zweimal aufgerufen wird, da zwei Speicherplätze geöffnet werden, was zu einer Speicherverschwendung führt.

3. Konstruktor-Prototyp

Vom Konstruktor über den Prototyp zugewiesene Funktionen werden von allen Objekten gemeinsam genutzt. JavaScript legt fest, dass jeder Konstruktor eine prototype hat, die auf ein anderes Objekt verweist. Beachten Sie, dass dieser prototype ein Objekt ist und alle Eigenschaften und Methoden dieses Objekts dem Konstruktor gehören.

Erstellen Sie einen Konstruktor wie folgt:

Funktion Student(Alter,Name){
            dieses.Alter = Alter;
            dieser.name = Name;
            dies.score = Funktion(){
                console.log('Die Kinder haben alle gute Noten!');
            }
        }
        console.dir(Student);

Drucken Sie alle Methoden im Konstruktor aus, und Sie können Folgendes sehen:

prototype kann gefunden werden.
Sie können diese unveränderlichen Methoden direkt auf prototype definieren, sodass alle Instanzen des Objekts diese Methoden gemeinsam nutzen können.

Funktion Student(Alter,Name){
            dieses.Alter = Alter;
            dieser.name = Name;
        }
        Student.prototype.score = Funktion(){
            console.log('Die Kinder haben alle gute Noten!');
        }
        console.dir(Student);
        var xl = neuer Student(18,'Kleiner Bär');
        var wh = neuer Student (17, „Student“);
        xl.score();
        wh.score();
        Konsole.log(xl.score === wh.score);

Das Druckergebnis ist:

Und durch den zweimaligen Aufruf der Funktion wird nur ein Speicherplatz freigegeben, was ebenfalls die Speicherverschwendung reduziert.

Hinweis: Im Allgemeinen werden öffentliche Eigenschaften im Konstruktor und öffentliche Methoden im Prototypobjekt definiert.

4. Objektprototyp __proto__

Jedes Objekt hat eine Eigenschaft __proto__ , die auf das prototype der Konstruktorfunktion verweist. Der Grund, warum unser Objekt die Eigenschaften und Methoden des Prototypobjekts der Konstruktorfunktion verwenden kann, liegt darin, dass das Objekt den Prototyp __proto__ hat.

Wie unten dargestellt:

Funktion Student(Alter,Name){
            dieses.Alter = Alter;
            dieser.name = Name;
           
        }
 Student.prototype.score = Funktion(){
     console.log('Die Kinder haben alle gute Noten!');
 }
// console.dir(Student);
 var xl = neuer Student(18,'Kleiner Bär');
 var wh = neuer Student (17, „Student“);
 konsole.log(xl);

Überprüfen Sie, ob es einen __proto__ Objektprototyp mit dem folgenden Codenamen gibt

console.log(xl); //Das System fügt dem Objekt eine __proto__-Eigenschaft hinzu, um auf das Prototypobjekt des Konstruktors zu verweisen

Die Ausgabe ist:

Erkennbare Existenz.
Geben Sie im obigen Beispiel den folgenden Code ein, um zu bestimmen, ob __proto__ Objektprototyp und der Prototyp- prototype gleichwertig sind.

 Konsole.log(xl.__proto__ === Student.prototype);

Das Druckergebnis ist: true
Daher: __proto__ Objekt-Prototyp und Prototyp-Objekt prototype sind gleichwertig

Rufen Sie die Score-Funktion über das Instanzobjekt wie folgt auf:

xl.score();

Die Ausgabe ist:

Es kann aufgerufen werden und seine Methodensuchregel lautet: Überprüfen Sie zuerst, ob für das XL-Objekt eine score Methode vorhanden ist. Wenn ja, führen Sie score für dieses Objekt aus. Wenn keine solche Methode vorhanden ist, weil ein __prooto__ Attribut vorhanden ist, suchen Sie danach im Konstruktorfunktions-Prototypobjekt prototype .

Zur Beschreibung kann folgendes Diagramm verwendet werden:

Die Bedeutung des Objektprototyps __proto__ besteht darin, eine Richtung oder Route für den Suchmechanismus des Objekts bereitzustellen. Da es sich jedoch um ein nicht standardmäßiges Attribut handelt, kann dieses Attribut in der tatsächlichen Entwicklung nicht verwendet werden. Es verweist nur intern auf den prototype .

5. Konstruktor

Drucken Sie gemäß dem vorherigen Beispiel den Objektprototyp (__proto__) und den Konstruktor (xl) ( prototype ) des Prototypobjekts des Instanzobjekts ( Student ).

Konsole.log(Student.Prototyp);
Konsole.log(xl.__proto__);

Das Druckergebnis ist:

Es ist ersichtlich, dass sowohl der Objektprototyp (__proto__) als auch die Konstruktorfunktion (Prototyp) im Prototypobjekt eine Eigenschaft namens Konstruktor haben. Wir nennen die constructor , weil sie auf die Konstruktorfunktion selbst zurückverweist.

Drucken Sie dann die constroctor des Objektprototyps bzw. des Konstruktorprototyps aus. Beobachten Sie den Rückgabewert.

 Konsole.log(Student.Prototyp.Konstruktor);
 Konsole.log(xl.__proto__.Konstruktor);

Das Druckergebnis ist:

Es ist ersichtlich, dass sie alle auf den Student Konstruktor verweisen.
Das heißt, constructor wird hauptsächlich verwendet, um aufzuzeichnen, auf welchen Konstruktor sich das Objekt bezieht, und er kann es dem Prototypobjekt ermöglichen, auf den ursprünglichen Konstruktor zurückzuverweisen.

Im Allgemeinen werden die Methoden eines Objekts im Prototypobjekt des Konstruktors festgelegt. Wenn Sie einem Konstruktor mehrere Methoden hinzufügen, können Sie die Objektmethode verwenden.

Wie unten dargestellt:

 Student.Prototyp = {
            Punktzahl: Funktion(){
            console.log('Die Kinder haben alle gute Noten!')},
            Studie: Funktion(){
            console.log('Lerne fleißig!');  
        }

Beim Drucken des Konstruktorattributs des geänderten Prototypobjekts:

Es wurde festgestellt, dass sich der Zeiger des Prototypobjekts geändert hat. Dies liegt daran, dass das Prototypobjekt in Form eines Objekts zugewiesen wird, wodurch der ursprüngliche Inhalt des Konstruktor-Prototypobjekts überschrieben wird. Auf diese Weise zeigt der geänderte constructor des Prototypobjekts nicht mehr auf den aktuellen Konstruktor.
An diesem Punkt können wir dem geänderten Prototypobjekt einen constructor hinzufügen, der auf den ursprünglichen Konstruktor verweist.

wie folgt:

Student.Prototyp = {
            Konstrukteur:Student,
            Punktzahl: Funktion(){
            console.log('Die Kinder haben alle gute Noten!')},
            Studie: Funktion(){
            console.log('Lerne fleißig!');  
        }

Schließlich lautet das ausgedruckte Ergebnis :

Der Erfolg verweist zurück auf den ursprünglichen Konstruktor.

6. Die Beziehung zwischen Konstruktor, Instanz und Prototypobjekt

Gemäß dem obigen Beispiel kann die Beziehung zwischen Konstruktor, Instanz und Prototypobjekt durch das folgende Diagramm beschrieben werden:

7. Suchmechanismus (Regeln) für JavaScript-Mitglieder

• Wenn Sie auf die Eigenschaften (einschließlich Methoden) eines Objekts zugreifen, prüfen Sie zunächst, ob das Objekt selbst über die Eigenschaft verfügt.
• Wenn nicht, suchen Sie nach seinem Prototyp (also dem prototype -Prototypobjekt, auf das __proto__ zeigt).
• Wenn nicht, suchen Sie nach dem Prototyp des Prototypobjekts (Prototypobjekt des Objekts).

Und so weiter, bis Object gefunden wird (null).
Die Bedeutung des __proto__-Objektprototyps besteht darin, eine Richtung oder Route für den Suchmechanismus für Objektmitglieder bereitzustellen.

8. Erweitern integrierter Objekte

Sie können Prototypobjekte verwenden, um die ursprünglich integrierten Objekte zu erweitern und anzupassen.
Drucken Sie zunächst das Prototypobjekt des Arrays, um zu sehen, welche integrierten Objekte verfügbar sind.

 Konsole.log(Array.prototype);

Das Druckergebnis ist:

Fügen Sie jetzt beispielsweise eine benutzerdefinierte Funktion hinzu, um die Summe der geraden Zahlen im Array zu ermitteln.

 Array.prototype.sum = Funktion(){
            var Summe = 0;
            für(var i=0;i<this.length;i++){
                Summe += dies[i];
            }
            Rücklaufsumme;
        }

Um zu prüfen, ob das integrierte Objekt erfolgreich erweitert wurde, geben Sie erneut ein:

Konsole.log(Array.Prototyp);

Die Konstruktion ist erfolgreich. Geben Sie ein bestimmtes Instanzobjekt an, um zu bestimmen, ob es normal verwendet werden kann:

var arr = [1,2,3];
        Konsole.log(arr.sum());

Das Druckergebnis ist:

2. Die Natur der Klasse

• Das Wesen der class ist immer noch function .
• Alle Methoden einer Klasse werden in prototype Prototypeigenschaft der Klasse definiert.
• Die von der Klasse erstellte Instanz hat auch __proto__, das auf das Prototypobjekt der Klasse zeigt
• Die meisten Funktionen der ES6-Klassen können mit ES5 erreicht werden. Die neue Methode zum Schreiben class macht das Schreiben von Objektprototypen nur klarer und ähnelt eher der Syntax der objektorientierten Programmierung.

Dies ist das Ende dieses Artikels über JavaScript-Konstruktoren und -Prototypen. Weitere relevante JavaScript-Konstruktoren und -Prototypen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!