JavaScript Objekte und Prototypen

In JavaScript ist fast alles ein Objekt. Wenn du die Sprache wirklich beherrschen willst, musst du verstehen, wie Objekte funktionieren und wie das Konzept der Prototypen die Grundlage für Vererbung bildet. In diesem Tutorial schauen wir uns an, wie du Objekte erstellst, auf Eigenschaften zugreifst und was es mit der Prototypen-Kette auf sich hat.

Was ist ein Objekt?

Ein Objekt ist eine Sammlung von zusammengehörigen Daten (Eigenschaften) und Funktionen (Methoden). Man kann es sich wie eine Tasche vorstellen, in der verschiedene Dinge mit Namen beschriftet sind.

Das Objekt-Literal

Die einfachste Art, ein Objekt zu erstellen, ist das Objekt-Literal { }:

const user = {
  name: "Max Mustermann",
  age: 30,
  isAdmin: false,
  // Eine Methode
  greet: function() {
    console.log(`Hallo, mein Name ist ${this.name}!`);
  }
};

// Zugriff auf Eigenschaften
console.log(user.name); // Punkt-Notation: "Max Mustermann"
console.log(user["age"]); // Klammer-Notation: 30

// Methode aufrufen
user.greet(); // "Hallo, mein Name ist Max Mustermann!"

Prototypen verstehen

Jedes Objekt in JavaScript hat eine versteckte Eigenschaft namens [[Prototype]]. Diese verweist entweder auf ein anderes Objekt oder auf null.

Wenn du versuchst, auf eine Eigenschaft zuzugreifen, die ein Objekt selbst nicht hat, schaut JavaScript automatisch im Prototyp nach. Wenn sie dort auch nicht ist, schaut es im Prototyp des Prototyps nach, und so weiter. Das nennt man die Prototypen-Kette (Prototype Chain).

Beispiel für Prototyp-Vererbung

const animal = {
  eats: true,
  walk() {
    console.log("Tier läuft...");
  }
};

const rabbit = {
  jumps: true,
  // Wir setzen animal als Prototyp von rabbit
  __proto__: animal 
};

console.log(rabbit.jumps); // true (aus rabbit)
console.log(rabbit.eats);  // true (aus animal geerbt!)
rabbit.walk();             // "Tier läuft..." (aus animal geerbt!)

Hinweis: __proto__ wird hier zur Verdeutlichung genutzt. In modernem Code nutzt man eher Object.create() oder Klassen.

Object.create()

Mit Object.create(proto) kannst du ein neues Objekt erstellen und dabei direkt angeben, welches Objekt sein Prototyp sein soll.

const person = {
  isHuman: true,
  printIntroduction() {
    console.log(`Mein Name ist ${this.name}. Bin ich ein Mensch? ${this.isHuman}`);
  }
};

const me = Object.create(person);
me.name = "Junie"; // "name" wird auf "me" gesetzt, nicht auf "person"

me.printIntroduction(); // "Mein Name ist Junie. Bin ich ein Mensch? true"

Built-in Prototypes

Fast alle Objekte in JavaScript erben letztendlich von Object.prototype. Deshalb haben fast alle Objekte Zugriff auf Methoden wie toString() oder hasOwnProperty().

Arrays erben von Array.prototype, Funktionen von Function.prototype.

const numbers = [1, 2, 3];
// numbers -> Array.prototype -> Object.prototype -> null

console.log(numbers.hasOwnProperty("length")); // true (geerbt von Object.prototype)
numbers.push(4); // push kommt von Array.prototype

Konstruktor-Funktionen

Bevor es die class-Syntax in ES6 gab, nutzte man Konstruktor-Funktionen, um mehrere ähnliche Objekte zu erstellen.

function Player(name, level) {
  this.name = name;
  this.level = level;
}

// Methoden werden an den Prototyp gehängt, um Speicher zu sparen
Player.prototype.levelUp = function() {
  this.level++;
  console.log(`${this.name} ist jetzt Level ${this.level}!`);
};

const p1 = new Player("Gamer123", 10);
const p2 = new Player("ProPlayer", 50);

p1.levelUp(); // "Gamer123 ist jetzt Level 11!"

Zusammenfassung

Objekte speichern Daten als Key-Value-Paare.
Prototypen ermöglichen es Objekten, Eigenschaften von anderen Objekten zu erben.
Die Prototype Chain ist der Mechanismus, mit dem JavaScript nach Eigenschaften sucht.
Alle Standard-Objekte (Arrays, Strings etc.) nutzen Prototypen für ihre eingebauten Methoden.

In einem späteren Tutorial schauen wir uns an, wie die moderne class-Syntax diese Konzepte noch einfacher zugänglich macht!

Weiterführende Links: