Javascript Prototype mal kurz erklärt

JavaScript ist eine prototypenbasierte Sprache. Was soll das eigentlich sein? Heute werde ich euch erklären, was Prototypen sind.

Was sind Prototype?

Zunächst einmal sollten wir uns nicht von dem Wort “Prototyp” verunsichern lassen. Um ehrlich zu sein klingt es abstrakt und irgendwie fancy.

“Prototyp” ist ein System. Dieses System erlaubt dir, Eigenschaften von Objekten zu definieren, auf die über die Instanzen des Objekts zugegriffen werden kann. Das klingt vielleicht noch etwas zu verklausuliert. Deshalb jetzt in einfachen Worten: Du schaffst Dir Methoden / Funktionen und fügst diese einem Objekt bei um sie dann später und bei Bedarf zu nutzen. Der aufmerksame und Objekteorientierte Programmierer wird jetzt aufschrecken. Und im groben ist Prototyp auch nichts anderes als Objekteorientiertheit.

Hinweis
Prototype ist eng mit der objektorientierten Programmierung verbunden. Es würde daher keinen Sinn machen, wenn Du noch keine Erfahrung in der objektorientierten Programmierung hast oder zumindest nicht verstehst, worum es bei der objektorientierten Programmierung geht. Daher wäre es an dieser Stelle ratsam, sich hier noch zu belesen und auszuprobieren. Aber macht dir keinen Stress. Niemand versteht auf Anhieb OOP. Man sagt, dass man ungefähr ein Jahr braucht um das Konzept zu leben. Damit meine ich etwas anderes als nur zu verstehen. Also einfach drauf los und immer wieder von vorne anfangen wenn du beim ausprobieren ins stocken kommst.

Beispiel Array Bauplan

Als Beispiel nehmen wir mal das Array. Das Array ist ein Bauplan bzw. Blueprint für jede Array-Instanz. Du kannst eine Array Instanz mit new Array() oder kurz [] erzeugen.

const array = ['one', 'two', 'three']
console.log(array)
// Same result as above
const array = new Array('one', 'two', 'three')

Unsere Array Instanz besitzt ja keine Methoden. Oder doch? Es besitzt nämlich sehr wohl Methoden und zwar werden diese durch den Bauplan dem Objekt zu Verfügung gestellt. Lasst Euch mal unser array ausgeben.

Jetzt klickt man auf __proto__ bzw. prototype (in Firefox) und ihr erhaltet alle Array Funktionen die im Bauplan von Werk aus beigefügt worden sind. Wie zum Beispiel: concat, slice, filter und map.

Um alle Methoden zu sehen, könnt auch in Eurer Browser Konsole eingeben: Array.prototype

Wie ist der Ablauf, sobald man eine Prototype Methode aufruft?

Nehmen wir die Array Funktion map. Diese wollen wir an unserem Beispiel Array anwenden. array.map(value => value.length). Zuerst schaut der Javascript Interpreter im Objekt an sich, ob es die Methode map besitzt. Danach schaut Javascript im Bauplan des Arrays. Also im Prototype. Wenn dort die Methode nicht gefunden wird, wirft uns Javascript ein undefined zurück.

Prototype Chain

Ich erkläre mal Prototype Chain an einem einfachen Besipiel. Wir haben die Klasse Pet. Dog ist eine Subklasse und erbt von Pet. Pet hat die getName Methode und Dog hat die Bellen Methode. Hier erst mal die Constructor basierte Variante (also OOP).

class Pet {
    constructor(name) {
        this.name = name
     }
     getName() {     
         alert('The animal name is ' + this.name) 
     }   
}

class Dog extends Pet {
    makeVoice() {
        alert(this.name + ' make wau wau')
    }
}

dog = new Dog('Lumpi');
dog.getName() // The animal name is 
dog.makeVoice(); // Lumpi make wau wau

Das ganze sieht in der Prototype Variante dann so aus:

function Pet(name) {
     this.name = name
 }
 Pet.prototype.makeVoice = function () {
     alert(this.name + ' make wau wau' )
 }

Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Javascript – Die geschweifte Klammer in der Funktions Parameterliste

January 27, 2021

Vielleicht habt ihr das schon mal gesehen. Eine geschweifte Klammer in der Funktionsparameterliste. Was ist das und wozu ist das gut? Um hier Licht ins dunkel zu bringen, bediene ich mich eines kleine Fallbeispiels. Im folgendem Beispiel möchte ich aus einem Objekt den Namen der Person mit der id = 8 finden. Vielleicht erkennt der […]

Wie merge ich zwei Javascript Objekte

January 15, 2021

Der Ein oder Andere wird im Laufe seiner Javascript Entwicklung an einen Punkt gekommen sein zwei JavaScript Objekte zusammenzuführen. Quasi „mergen“. Ein Fallbeispiel könnte sein, ihr habt eine JS Klasse mit einer Membervariablen vom Typ „Object“ die Texte im key-value beinhaltet. Nun wollt ihr statt „Tschüßi Kowski“ doch lieber Auf Wiedersehen ausgeben. Eine Möglichkeit ihr […]

Tailwind und VanillaJS – Toast Hawaii bzw. Notification

January 12, 2021

Stellt euch vor ihr wollt für ein Shop eine Notification oder auch bekannt als Toast ausgeben. Zum Beispiel Produkt in Warenkorb gelegt. Oder „ups, leider ist das Produkt in ihrer Größe nicht mehr vorhaben. Es gibt hier echt viele und gute Bibliotheken. Aber ich will selber eine Toaster Klasse bauen, weil mir der Overhead gerade […]

TailwindCSS und VanillaJS – Step Progress Bar

January 9, 2021

Ich persönlich finde bei Bestellvorgängen oder Behördenformularen es extrem hilfreich eine sogenannte Prozessverfolgung auf dem Bildschirm zu haben. Damit weiß man stets Bescheid, wo man gerade ist und wie lange das noch in etwa dauern kann. Ich dachte mir, es ist Samstagabend und die Kinder sind im Bett und die bessere Hälfte macht noch Steuern, […]

Object Orientierte Programmierung in Javascript

January 6, 2021

Vor 10 Jahren hielt ich immer Abstand von Javascript. Nur wenn es sein musste habe ich mich mit JS beschäftigt. Das waren mir zu viel geschweifte Klammern und Callbacks und es haftete an Javascript ein schlechtes Image, was die Sicherheit anging, an. Um auch ganz ehrlich zu sein, ich hatte Probleme Javascript Code richtig zu […]

Einstieg in axios.js

December 7, 2020

Das tägliche Brot eines Webentwicklers sind XHR / Ajax Anfragen zu generieren. Also man fragt an einer Schnittstelle nach Daten an. Das ist auch ein alter Hut. Dafür gibt es auch nicht einen Weg sondern viele. Und keiner ist richtiger oder falsch. Es ist immer Geschmackssache und vom Fall abhängig. Ich bevorzuge in meiner Javascript […]