JavaScript-Prototypen für Einsteiger

JavaScript ist eine Prototyp-basierte Sprache. Lassen Sie uns die Definition von Prototypen in JavaScript dekonstruieren.

Wenn Sie anfangen, die objektorientierte Programmierung mit JavaScript zu lernen, werden Sie schnell auf die prototypische Vererbung stoßen.

Ein Prototyp ist ein Mitglied eines Objekts und kann von einer Instanz referenziert werden. Bevor wir unseren eigenen Prototyp erstellen. Schauen wir uns einfach ein schnelles Beispiel an, wie wir bereits mit Prototypen umgehen.

Lassen Sie uns ein Array erstellen:

let x = 
x.map(a => a + 1) //

x enthält ein Array. x ist eine Instanz von Array. x hat eine Referenz auf alle Prototypeigenschaften von Array. So könnten wir zum Beispiel die Funktion Array.prototype.map() auf x aufrufen

Ich fange an, überall Prototypen zu sehen!

Lassen Sie uns unseren eigenen Prototyp setzen:

// Creates a constructor called Country
class Country {
constructor(country) {
this.country = country
}
}// Create a new instance of Country
let sweden = new Country('Sweden')// sweden is now an object called Country
sweden // Country { country: 'Sweden' }

Jetzt wollen wir, dass Schweden der Welt Hallo sagt. Hier kommen Prototypen und die Prototyp-Kette ins Spiel

// Add method to the prototype of the constructor
Country.prototype.helloWorld = function() {
return `I am a country called ${this.country}`
}

Land hat die Methode helloWorld als Prototyp-Eigenschaft. schweden ist immer noch das gleiche Objekt, aber wir können jetzt helloWorld referenzieren.

sweden.helloWorld() // 'I am a country called Sweden'

Der Interpreter sucht nach helloWorld Wenn keine Referenz gefunden wird, beginnt er, die Prototypenkette hochzuspringen, bis die Anforderung erfüllt ist In diesem Fall kann helloWorld über die Prototypenkette auf Schweden bezogen werden.

Und wenn wir ein neues Land erstellen:

let canada = new Country('Canada')

Gleiches gilt für canada, die neue Instanz von Country kann ebenfalls auf die Prototypen zugreifen. So funktioniert ein Prototyp und die Prototypenkette. Er funktioniert als Bindeglied zwischen der Funktion und ihren Objekten.

Ich möchte den Prototyp meines Konstruktors mit einem anderen Konstruktor teilen?

Angenommen, wir wollen das Prototyp-Objekt von PlanetA mit PlanetB verbinden

// Constructor PlanetA
class PlanetA {
constructor(instance) {
this.instance = instance
}
// prototype method
helloWorld() {
return `I am a instance called ${this.instance}`
}
}let x = new PlanetA('x')x.helloWorld() // I am a instance called x

Um die Flexibilität der prototypischen Vererbung zu demonstrieren, werden wir die Prototypen unserer Instanz von PlanetA mit PlanetB verbinden. Dazu können wir Object.setPrototypeOf() verwenden.

// Constructor PlanetB
class PlanetB {
constructor(instance) {
this.instance = instance
}
}let y = new PlanetB('y')Object.setPrototypeOf(y, x)y.helloWorld() // I am a instance called y

Das war eine grundlegende Einführung in das Konzept der Vererbung in JavaScript. Das Wichtigste ist zu wissen, dass Sie die Möglichkeit haben, Objekte ohne interne Eigenschaften dynamisch zu instanziieren und trotzdem auf Methoden der Prototypenkette zugreifen zu können.

Es gibt noch weitere Details zu Prototypen und zur Handhabung der Vererbung in JavaScript, je nachdem, wie Sie Ihre Objekte faktorisieren wollen. Das Schlüsselwort „class“ ist syntaktischer Zucker für Konstruktorfunktionen. Es gibt keine Klassenvererbung in JavaScript, sondern nur eine prototypische Art der Vererbung.

Ich hoffe, dass Sie dies hilfreich fanden und dass Sie sich jetzt wohler fühlen, wenn Sie über Prototypen und die Funktionsweise von OOP in JavaScript sprechen.

Genießen Sie Ihren Code.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.