JavaScript - dies ist eine der beliebtesten Programmiersprachen, die häufig zum Erstellen interaktiver Websites verwendet wird. Eines der Merkmale dieser Sprache ist das Vorhandensein von Prototypen von Objekten, die bei der JavaScript-Programmierung eine wichtige Rolle spielen.
Ein Prototyp ist ein Objekt, das verwendet wird, um die Eigenschaften und Methoden eines anderen Objekts zu vererben. Beim Erstellen von Objekten in JavaScript wird das Schlüsselwort verwendet this das auf das aktuelle Objekt verweist und es Ihnen ermöglicht, auf seine Eigenschaften und Methoden zuzugreifen.
Ein Merkmal der Verwendung eines Schlüsselworts this ist, dass es seine Referenz abhängig vom Kontext des Funktionsaufrufs ändern kann. Wenn Sie beispielsweise eine Objektmethode aufrufen, this wird auf das Objekt selbst verweisen und beim Aufruf der Methode aus dem globalen Kontext auf das globale Objekt verweisen (z. B., window im Browser).
Verschiedene Methoden werden verwendet, um mit Prototypen in JavaScript zu arbeiten, wie zum Beispiel Object.create(), Object.setPrototypeOf() und andere. Sie ermöglichen es Ihnen, Objekte mit einem bestimmten Prototyp zu erstellen und den Prototyp eines Objekts zu ändern, während das Programm ausgeführt wird. Mithilfe von Prototypen können Sie flexiblere und skalierbarere JavaScript-Programme erstellen.
Merkmale der Arbeit mit Prototypen in JavaScript
Mit Prototypen in JavaScript können Sie Objekte erstellen und erweitern, indem Sie ihre Struktur und Funktionalität ändern. Die Interaktion mit Prototypen hat eine Reihe von Merkmalen, die bei der Entwicklung wichtig sind.
1. Prototypische Vererbung. JavaScript implementiert Prototypvererbung, was bedeutet, dass ein Objekt Eigenschaften und Methoden von seinem Prototyp erben kann. Wenn das Feld oder die Methode im Objekt nicht gefunden wird, sucht JavaScript im Prototyp nach ihnen.
2. Das Schlüsselwort this. Im Kontext der Arbeit mit Objektprototypen in JavaScript wird das this-Schlüsselwort auf das Objekt selbst verweisen, von dem die Methode aufgerufen wird. Wenn Sie eine Methode aufrufen, die vom Prototyp eines Objekts geerbt wird, verweist this auf das Objekt selbst und nicht auf den Prototyp.
3. Prototypen ändern. Sie können den Prototyp eines Objekts ändern, indem Sie Eigenschaften und Methoden hinzufügen oder entfernen. Dabei werden alle Objekte, die von diesem Prototyp geerbt wurden, automatisch aktualisiert.
4. Eine Kette von Prototypen. Jedes Objekt hat seine eigene Eigenschaft [[Prototype]], das auf seinen Prototyp hinweist. Wenn andere Prototypen im Prototyp vorhanden sind, bilden sie eine Kette, die JavaScript bei der Suche nach einer Eigenschaft oder Methode für ein bestimmtes Objekt durchläuft.
5. Konstrukteure und Prototypen. In JavaScript werden Prototypobjekte mit Konstruktoren erstellt. Konstrukteure erstellen ein neues Objekt und weisen ihm einen Prototyp zu. Alle im Konstruktor erstellten Eigenschaften und Methoden werden zu Objekteigenschaften und -methoden, und alle Eigenschaften und Methoden, die im Konstruktorprototyp hinzugefügt wurden, werden zu Prototypeigenschaften und -methoden.
6. Vererbung von Prototypeigenschaften. Wenn Sie Prototypeigenschaften vererben, werden die Prototypeigenschaften von einem Objekt in ein anderes kopiert. Die Änderung der Prototypeigenschaften in einem Objekt wirkt sich jedoch nicht auf das andere aus.
7. Prototypen und Leistung. Die Verwendung von Prototypen kann die Leistung bei der Arbeit mit Objekten verbessern, da sich gemeinsam genutzte Methoden und Eigenschaften im Prototyp befinden und nicht in jedem Objekt dupliziert werden.
All diese Merkmale machen Prototypen zu einem leistungsstarken Werkzeug für die Arbeit mit Objekten in JavaScript, mit dem Sie eine flexible und erweiterbare Datenstruktur und -funktionalität erstellen können.
Das Schlüsselwort this in JavaScript
Wenn eine Funktion als Methode eines Objekts aufgerufen wird, verweist das this-Schlüsselwort auf dieses Objekt. Zum Beispiel im folgenden Code:
var obj = name: "John",
greet: function() console.log("Hello, " + this.name + "!");
>
>;
Wenn Sie in diesem Beispiel die greet() -Methode eines obj-Objekts aufrufen, wird der Wert des this-Schlüsselworts auf das obj-Objekt selbst verweisen. Dies ermöglicht die Verwendung der name-Eigenschaft des aktuellen Objekts.
Das this-Schlüsselwort kann auch im globalen Gültigkeitsbereich verwendet werden, wenn die Funktion selbst aufgerufen wird. In diesem Fall bezieht sich der Wert des this-Schlüsselworts auf das window-Objekt, das das aktuelle Browserfenster oder den globalen JavaScript-Ausführungskontext darstellt. Zum Beispiel:
function greet() console.log("Hello, " + this.name + "!");
>
var name = "John";
Wenn Sie in diesem Beispiel greet() ohne Objektkontext aufrufen, verweist der Wert des this-Schlüsselworts auf das window-Objekt, da die Variable name im globalen Gültigkeitsbereich definiert ist.
Das this-Schlüsselwort kann auch mit den Methoden call() und apply() an ein anderes Objekt gebunden werden. Zum Beispiel:
In diesem Beispiel ruft call() die Funktion greet() im Kontext des obj1- bzw. obj2-Objekts auf, und der Wert des this-Schlüsselworts innerhalb der Funktion verweist auf das entsprechende Objekt.
Die Verwendung des this-Schlüsselworts in JavaScript ermöglicht die Erstellung flexibler und neu verwendbarer objektorientierter Programme, in denen Funktionen und Methoden mit objektspezifischen Daten arbeiten können.
Methoden zum Arbeiten mit Objektprototypen
In JavaScript werden Prototypen verwendet, um Objekten neue Eigenschaften und Methoden hinzuzufügen. Dies ist ein leistungsfähiger Mechanismus, mit dem Sie neue Objekte basierend auf vorhandenen Objekten erstellen können.
Es gibt mehrere Möglichkeiten, mit Objektprototypen zu arbeiten:
1. Vererbung über die Prototypeigenschaft __proto__:
Mit dieser Methode können Sie einem Objekt einen Prototyp zuweisen, der zum Vererben von Eigenschaften und Methoden verwendet werden soll. Zum Beispiel:
let parent = < name: "Parent" >; let child = < age: 10 >; child.__proto__ = parent; console.log(child.name); // "Parent"
2. Verwenden der Object-Methode.create():
Die Object-Methode.create() erstellt ein neues Objekt mit dem angegebenen Prototyp. Zum Beispiel:
let parent = < name: "Parent" >; let child = Object.create(parent); child.age = 10; console.log(child.name); // "Parent"
3. Konstruktoren und das Schlüsselwort new:
Mithilfe von Konstruktoren und dem new-Schlüsselwort können Sie Objekte mit einer bestimmten Struktur erstellen. Konstruktoren enthalten Methoden und Eigenschaften, die in neuen Objekten verfügbar sind. Zum Beispiel:
function Parent() < this.name = "Parent"; >let child = new Parent(); child.age = 10; console.log(child.name); // "Parent"
4. Verwenden von Klassen:
Neue Versionen von JavaScript haben die Möglichkeit, Klassen zu verwenden, um mit Prototypen von Objekten zu arbeiten. Klassen bieten eine praktische Syntax zum Definieren von Konstruktoren und Methoden von Objekten. Zum Beispiel:
class Parent < constructor() < this.name = "Parent"; >> let child = new Parent(); child.age = 10; console.log(child.name); // "Parent"
Wenn sie die verschiedenen Möglichkeiten kennen, mit Prototypen zu arbeiten, können Entwickler sie effektiv zum Erstellen und Vererben von Objekten in JavaScript verwenden.
Erstellen eines Prototyps mit einer Konstruktorfunktion
Um einen Prototyp mit einer Konstruktorfunktion zu erstellen, müssen Sie eine Funktion erstellen, die als Vorlage für Objekte dient. Der Name der Konstruktorfunktion beginnt normalerweise mit einem Großbuchstaben.
function Person(name, age) var person1 = new Person("John", 25);var person2 = new Person("Alice", 30);In diesem Beispiel wird die Person-Konstruktorfunktion verwendet, um die Objekte person1 und person2 zu erstellen. Der Konstruktor akzeptiert zwei Parameter - name und age, die die Eigenschaften von Objekten initialisieren.
Mit der Konstruktorfunktion können wir einfach viele Objekte mit demselben Satz von Eigenschaften erstellen. Sie können beispielsweise mehrere Objekte vom Typ Person mit unterschiedlichen Werten für die Eigenschaften name und age erstellen.
Außerdem erstellt die Konstruktorfunktion einen Prototyp eines Objekts, das die Methoden und Eigenschaften enthält, die für alle mit diesem Konstruktor erstellten Instanzen verfügbar sind.
Auf diese Weise können Sie mit einem Prototyp eines Objekts allgemeine Methoden und Eigenschaften definieren, die für alle mit diesem Konstruktor erstellten Objekte verfügbar sind. Dies ist beispielsweise nützlich, um Funktionen zu definieren, die für alle Objekte dieses Typs die gleiche Operation ausführen.
Erstellen eines Prototyps mit ES6-Klassen
JavaScript hat eine neue Möglichkeit zum Erstellen von Prototypen mit ES6-Klassen eingeführt. Klassen sind eine spezielle Syntax, die die Erstellung und Vererbung von Objekten erleichtert.
Verwenden Sie das Schlüsselwort, um eine Klasse zu erstellen class Nach dem der Klassenname angegeben wird. Die Methoden und Eigenschaften der Klasse werden dann in geschweiften Klammern deklariert. Eine Methode, die unbedingt in einer Klasse deklariert werden muss, ist eine Methode constructor. Es initialisiert ein Klassenobjekt und kann Argumente annehmen.
Sie müssen das Schlüsselwort verwenden, um eine Instanz einer Klasse zu erstellen new Nach dem der Klassenname und die Konstruktorargumente angegeben werden. Dadurch wird ein neues Objekt erstellt, das eine Instanz dieser Klasse ist.
Mit den Prototypen von Klassen in JavaScript können Sie Methoden und Eigenschaften von der übergeordneten Klasse erben. Dazu wird das Schlüsselwort verwendet extends, nach dem der Name der übergeordneten Klasse angegeben wird. Eine untergeordnete Klasse kann die Methoden der übergeordneten Klasse überschreiben und neue Methoden und Eigenschaften hinzufügen.
Dank der ES6-Klassen ist es viel einfacher und klarer geworden, Objektprototypen in JavaScript zu erstellen. Sie vereinfachen den Prozess der Erstellung und Vererbung von Objekten, wodurch der Code strukturierter und lesbarer wird.
Ändern des Prototyps eines Objekts
Manchmal kann es notwendig sein, den Prototyp eines Objekts nach der Erstellung zu ändern. Es gibt mehrere Möglichkeiten, dies in JavaScript zu tun.
Ändern des Prototyps mit Object.setPrototypeOf()
Die Object-Methode.Mit setPrototypeOf() können Sie den Prototyp eines Objekts ändern. Es nimmt zwei Parameter an: ein Objekt, dessen Prototyp geändert werden soll, und ein Prototyp-Objekt, das als neuer Prototyp dienen soll.
sound: "Animal sound",
sound: "Woof woof"
dog.makeSound(); // Wird "Woof woof" ausgeben
Ändern des Prototyps mit __proto__
Die Eigenschaft __proto__ ist ein Verweis auf den Prototyp eines Objekts. Es kann verwendet werden, um den Prototyp eines Objekts zu ändern.
sound: "Animal sound",
sound: "Woof woof"
dog.makeSound(); // Wird "Woof woof" ausgeben
Beachten Sie, dass die Verwendung der __proto__-Eigenschaft nicht empfohlen wird, da sie veraltet ist und in einigen Umgebungen möglicherweise nicht unterstützt wird.
Das Ändern des Prototyps eines Objekts kann in verschiedenen Szenarien nützlich sein, in denen Sie die Funktionalität eines Objekts hinzufügen oder ändern möchten. Sie sollten jedoch vorsichtig sein, wenn Sie den Prototyp ändern, da dies zu unerwartetem Verhalten von Objekten führen kann.
Prototypvererbung in JavaScript
Wenn ein Objekt auf eine Eigenschaft oder Methode zugreift, die es nicht hat, sucht JavaScript automatisch im Prototyp des Objekts nach ihr. Wenn eine Eigenschaft oder Methode gefunden wird, wird sie verwendet. Wenn nicht gefunden, wird die Suche im Prototyp des Prototyps des Objekts fortgesetzt, und so weiter, bis das gewünschte Element gefunden wird oder das Ende der Prototypkette erreicht ist.
Um eine Vererbung zwischen Objekten in JavaScript zu erstellen, müssen Sie das Schlüsselwort verwenden prototype. Wenn ein neues Objekt mit einem Operator erstellt wird new. es erstellt automatisch eine Eigenschaft __proto__, das auf den Prototyp eines Objekts verweist, das in seiner Klasse definiert ist (in JavaScript sind Klassen Funktionen).
Um die Prototypvererbung zwischen zwei Objekten festzulegen, müssen Sie Folgendes zuweisen __proto__ dem Prototyp des übergeordneten Objekts. Auf diese Weise hat das untergeordnete Objekt Zugriff auf die Eigenschaften und Methoden des übergeordneten Objekts.
Die Prototypvererbung in JavaScript ermöglicht die Erstellung von Beziehungen zwischen Objekten, wodurch die Organisation und Struktur des Codes vereinfacht und verbessert wird. Es reduziert auch den Code und erleichtert die Unterstützung und Modifizierung.
Beachten Sie jedoch, dass eine zu tiefe Prototypkette zu schlechter Leistung und schwierigem Lesen des Codes führen kann. Daher sollten Sie bei der Verwendung von Vererbung diese Faktoren berücksichtigen und versuchen, den Code optimal zu optimieren.
