path: root/files/de/learn/javascript/objects/basics/index.html

---
title: JavaScript object basics
slug: Learn/JavaScript/Objects/Basics
translation_of: Learn/JavaScript/Objects/Basics
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>

<p class="summary">In diesem Artikel betrachten wir die fundamentale <strong>JavaScript Objekt Syntax</strong> und betrachten erneut einige JavaScript-Funktionalitäten, die im Kursverlauf bereits betrachtet wurden, immer im Hinblick darauf, dass viele der Merkmale, mit denen Sie bereits zu tun hatten, Objekte sind.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorkenntnisse:</th>
   <td>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit  JavaScript Grundlagen (siehe <a href="/en-US/docs/Learn/JavaScript/First_steps">Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Bausteine</a>).</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Verständnis für die grundlegende Theorie zur objektorientierten Programmierung, wie dies mit JavaScript zusammenhängt  ("fast alle Dinge sind Objekte") und wie man mit JavaScript-Objekten zu arbeiten beginnt.</td>
  </tr>
 </tbody>
</table>

<h2 id="Objekt_Grundlagen">Objekt Grundlagen</h2>

<p>Ein Objekt ist eine Sammlung von zusammenhängenden Daten und/oder Funktionalitäten. Diese bestehen üblicherweise aus verschiedenen Variablen und Funktionen, die Eigenschaften und Methoden genannt werden, wenn sie sich innerhalb von Objekten befinden. Arbeiten wir ein Beispiel durch, um besser zu verstehen, wie ein Objekt aussieht.</p>

<p>Für den Anfang erzeugen wir eine lokale Kopie unserer Datei <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Sie enthält nur sehr wenig -  ein {{HTMLElement("script")}} Element, um unseren Quelltext einzufügen. Wir werden diese Datei bzw. dieses Beispiel als Basis nutzen, um die grundlegende Objektsyntax zu erforschen. Während der Arbeit an diesem Beispiel sollten Sie ihre  <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a> (z.B. Browser-Entwicklerwerkzeuge) geöffnet haben und bereit sein, einige Befehle einzutippen.</p>

<p>Wie mit vielen Dingen in JavaScript beginnt das Erzeugen eines Objekts häufig mit der Definition und Initialisierung einer Variablen. Versuchen Sie, folgendes unterhalb des bestehenden JavaScript Quelltextes einzugeben, dann abzuspeichern und einen Browser refresh durchzuführen:</p>

<pre class="brush: js notranslate">var person = {};</pre>

<p>Wenn Sie  <code>person</code> in ihrer JS console eingeben und die Entertaste drücken, sollten Sie folgendes Resultat erhalten:</p>

<pre class="brush: js notranslate">[object Object]</pre>

<p>Glückwunsch, Sie haben gerade ihr erstes Objekt erzeugt. Aufgabe erledigt! Aber dies ist ein leeres Objekt, also können wir noch nicht viel damit anfangen. Lassen sie uns unser Objekt erweitern, damit es folgendermaßen aussieht:</p>

<pre class="brush: js notranslate">var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] +
    ' is ' + this.age + ' years old. He likes ' +
    this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};
</pre>

<p>Nach dem Abspeichern und Aktualisieren des Browsers versuchen Sie, etwas vom Folgenden in der JavaScript-Konsole ihrer Browser Entwicklerwerkzeuge einzugeben:</p>

<pre class="brush: js notranslate">person.name
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()</pre>

<p>Sie haben nun einige Daten und Funktionen innerhalb ihres Objekts und sind in der Lage, mit recht einfacher Syntax darauf zuzugreifen!</p>

<div class="note">
<p><strong>Notiz</strong>: Wenn Sie Schwierigkeiten damit haben, dies zum Funktionieren zu bringen, versuchen Sie, Ihren Code mit unserer Version zu vergleichen - siehe  <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (zzgl. <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Die Live Version wird eine leere Anzeige erzeugen - das ist so in Ordnung - öffnen Sie erneut die Entwicklerwerkzeuge [Mozilla Firefox: F12 -&gt; Konsole] und versuchen Sie, die obigen Befehle einzugeben um die Objektstruktur zu betrachten.</p>
</div>

<p>Was passiert hier? Ein Objekt besteht aus vielen Elementen (engl. "Members", Anm. d. Übersetzers). Davon hat jedes einen Namen (z.B. <code>name</code> und <code>age</code>, wie oben) und einen Wert ( z.B. <code>['Bob', 'Smith' ]</code> und <code>32</code>). Jedes Name-Wert-Paar muss durch ein Komma getrennt sein und die jeweiligen Namen und Werte werden jeweils durch einen Doppelpunkt aufgeteilt. Die Syntax folgt stets diesem Muster:</p>

<pre class="brush: js notranslate">var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};</pre>

<p>Der Wert eines Objekt-Elements kann so ziemlich alles sein - in unserem <code>person</code>-Objekt haben wir einen String, eine Zahl, zwei Arrays und zwei Funktionen. Die ersten vier Elemente sind Datansätze und werden als Objekteigenschaften bezeichnet. Die letzten beiden Elemente sind Funktionen die es dem Objekt ermöglichen, etwas mit den Daten zu tun und werden als <strong>Methoden</strong> des Objekts bezeichnet.</p>

<p>Ein Objekt wie dieses bezeichnet man als <strong>Objektliteral</strong> — wir haben die Inhalte des Objekts wortwörtlich aufgeschrieben, als wir es erzeugt haben. Dies steht im Gegensatz zu solchen Objekten, die aus Klassen instanziert werden, welche wir später genauer betrachten werden.</p>

<p>Es ist durchaus üblich ein Objekt unter Verwendung eines Objektliterals zu erzeugen, wenn  man eine Reihe von strukturierten, zusammenhängenden Datensätzen auf gewisse Weise übertragen möchte. Zum Beispiel beim Senden einer Anfrage an einen Server, um diese in einer Datenbank abzuspeichern. Ein einzelnes Objekt zu senden ist viel effizienter, als viele Datensätze einzeln und darüber hinaus ist es einfacher, mit einem Array zu arbeiten, wenn man einzelne Datensätze anhand ihres Namens identifizieren möchte.</p>

<h2 id="Punktnotation">Punktnotation</h2>

<p>Oben haben Sie auf die Eigenschaften und Methoden des Objektes mittels Punktnotation zugegriffen.<strong> </strong>Der Objektbezeichner <code>person</code> dient als <strong>Namensraum </strong>- dieser muss zuerst angegeben werden, um auf etwas zuzugreifen, das innerhalb des Objektes <strong>eingekapselt </strong>ist. Als nächstes folgt der Punkt und anschließend der Bestandteil, auf den Sie zugreifen wollen - dies kann der Name einer einfachen Eigenschaft sein, ein Element einer Arrayeigenschaft oder der Aufruf einer der <strong>Objektmethoden</strong>, zum Beispiel:</p>

<pre class="brush: js notranslate">person.age
person.interests[1]
person.bio()</pre>

<h3 id="Sub-Namensräume">Sub-Namensräume</h3>

<p>Es ist sogar möglich, den Wert eines Objekt-Members zu einem anderen Objekt umzuwandeln.</p>

<p>Versuchen Sie zum Beispiel, den "name" Member von</p>

<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre>

<p>zu</p>

<pre class="brush: js notranslate">name : {
  first: 'Bob',
  last: 'Smith'
},</pre>

<p>zu ändern. Hier erzeugen wir effektiv einen Sub-Namensraum. Das hört sich kompliziert an, ist es aber nicht - um auf diese Inhalte zuzugreifen, müssen Sie bloß den zusätzlichen Namensraum, getrennt durch einen Punkt, hinzufügen. Versuchen Sie folgendes in der JS Konsole:</p>

<pre class="brush: js notranslate">person.name.first
person.name.last</pre>

<p><strong>Wichtig</strong>: An diesem Punkt müssen Sie ihre Methodendeklarationen umarbeiten und Instanzen von</p>

<pre class="brush: js notranslate">name[0]
name[1]</pre>

<p>zu</p>

<pre class="brush: js notranslate">name.first
name.last</pre>

<p>ändern. Sonst greifen die Methoden ins Leere.</p>

<h2 id="Klammer-Notation">Klammer-Notation</h2>

<p>Es gibt einen weiteren Weg, auf Objekteigenschaften zuzugreifen - durch Benutzung der Klammern-Notation. Statt dies zu schreiben:</p>

<pre class="brush: js notranslate">person.age
person.name.first</pre>

<p>Schreibt man:</p>

<pre class="brush: js notranslate">person['age']
person['name']['first']</pre>

<p>Dies gleicht der Art wie man auf Arrayelemente zugreift und ist im Grunde der gleiche Vorgang - statt einen Index zu nutzen, um ein Element auszuwählen, benutzt man den den Namen der mit jedem Memberwert assoziiert wird. Es wundert daher nicht, dass Objekte manchmal <strong>assoziative Arrays</strong> genannt werden - sie verknüpfen Zeichenketten mit Werten in der gleichen Weise, wie ein Array Indizes mit Werten verknüpft.</p>

<h2 id="Wertzuweisungen_an_Objekt-Elemente">Wertzuweisungen an Objekt-Elemente</h2>

<p>Bisher haben wir nur betrachtet, wie man Objekt-Elemente abruft ( getting ) — man kann den Wert von Objektelementen auch setzen ( updating ), indem man das Element, welches gesetzt werden soll, folgendermaßen deklariert:</p>

<pre class="brush: js notranslate">person.age = 45;
person['name']['last'] = 'Cratchit';</pre>

<p>Versuchen Sie, die Zeilen wie oben aufgeführt einzugeben und dann die Elemente wieder abzurufen, etwa so:</p>

<pre class="brush: js notranslate">person.age
person['name']['last']</pre>

<p>Zuweisungen hören nicht beim Ändern von Werten existierender Eigenschaften und Methoden auf, man kann auch völlig neue Elemente erzeugen. Versuchen Sie dies in der JS Konsole:</p>

<pre class="brush: js notranslate">person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }</pre>

<p>Sie können diese neuen Elemente nun ausprobieren:</p>

<pre class="brush: js notranslate">person['eyes']
person.farewell()</pre>

<p>Ein nützlicher Aspekt der Klammer-Notation ist jener, dass man nicht nur Elementwerte dynamisch zuweisen kann, sondern auch Elementnamen. Nehmen wir an, wir wollen es Usern ermöglichen, selbstdefinierte Wertetypen in ihren <code>people</code>-Daten zu speichern, indem sie den Elementnamen und Wert in zwei Textfeldern eingeben. Wir könnten diese Werte so abrufen:</p>

<pre class="brush: js notranslate">var myDataName = nameInput.value;
var myDataValue = nameValue.value;</pre>

<p>dann könnten wir diesen neuen Elementnamen und Wert zum <code>person</code>-Objekt so hinzufügen:</p>

<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre>

<p>Um das auszuprobieren, versuchen Sie, folgendes in ihren Quelltext einzufügen, gleich unterhalb der schliessenden, geschweiften Klammer des <code>person</code>-Objekts:</p>

<pre class="brush: js notranslate">var myDataName = 'height';
var myDataValue = '1.75m';
person[myDataName] = myDataValue;</pre>

<p>Nach dem Abspeichern und einem Browser-Refresh geben Sie folgendes in der Konsole ein:</p>

<pre class="brush: js notranslate">person.height</pre>

<p>Eine Eigenschaft zu einem Objekt hinzuzufügen ist mit der Punkt-Notation nicht möglich. Diese akzeptiert nur einen literalen Elementnamen, keine Variable, die auf einen Namen zeigt.</p>

<h2 id="Was_bedeutet_this">Was bedeutet "this"?</h2>

<p>Sie haben vielleicht schon etwas seltsames in unseren Methoden bemerkt. Sehen wir uns zum Beispiel folgendes genauer an:</p>

<pre class="brush: js notranslate">greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}</pre>

<p>Sie wundern sich wahrscheinlich, was dieses "this" sein soll. Das Schlüsselwort <code>this</code> referenziert das derzeitige Objekt, in dem der Code hineingeschrieben wurde - in diesem Fall wäre <code>this</code> gleichbedeutend mit <code>person</code>. Also warum nicht einfach stattdessen <code>person</code> schreiben? Wie Sie im Artikel  <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> sehen werden, wenn wir damit beginnen, z.B. Konstruktoren zu erzeugen usw.: <code>this</code> ist sehr nützlich - es wird immer sicherstellen, dass die korrekten Werte verwendet werden, wenn sich der Kontext eines Elementes ändert (z.B. zwei unterschiedliche Objektinstanzen von <code>person</code> haben andere Namenswerte und sollten folgerichtig ihren jeweiligen Namenswert verwenden, wenn die greeting Methode aufgerufen wird).</p>

<p>Lassen Sie uns dies an einem vereinfachten Paar Objekten vom Typ <code>person</code> verdeutlichen:</p>

<pre class="brush: js notranslate">var person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name: 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}</pre>

<p>In diesem Fall wird <code>person1.greeting()</code>  "Hi! I'm Chris." ausgeben; <code>person2.greeting()</code> wiederum wird  "Hi! I'm Brian." ausgeben, obwohl der Quelltext in jedem Fall genau gleich lautet. Wie schon gesagt,  <code>this</code>  ist gleichbedeutend mit dem Objekt, in dem sich der Quelltext befindet - das ist nicht sehr nützlich, wenn man Objektliterale händisch schreibt, aber es ist sehr hilfreich, sobald Objekte dynamisch erzeugt werden (zum Beispiel unter Verwendung von Konstruktoren). Es wird im weiteren Verlauf alles deutlich werden.</p>

<h2 id="Sie_haben_die_ganze_Zeit_Objekte_verwendet">Sie haben die ganze Zeit Objekte verwendet</h2>

<p>Als Sie diese Beispiele durchgegangen sind, haben Sie wahrscheinlich gedacht, dass die Punktnotation, die Sie verwendet haben, sehr vertraut scheint. Es liegt daran, dass Sie diese im gesamten Kursverlauf benutzt haben. Jedes Mal, wenn wir ein Beispiel behandelten, welches Teile des built-in Browser API oder JavaScript-Objekte verwendete, haben wir Objekte verwendet, da solche Funktionalitäten genau mit der gleichen Art von Objektstrukturen aufgebaut werden, wie wir sie hier betrachtet haben. Diese sind allerdings etwas komplexer als die unserer eigenen, einfachen Beispiele.</p>

<p>Wenn Sie String-Methoden wie diese verwenden,</p>

<pre class="brush: js notranslate">myString.split(',');</pre>

<p>haben Sie eine Methode verwendet, die eine Instanz der <code>String</code>-Klasse zur Verfügung stellte. Jedes Mal, wenn Sie einen String in ihrem Quelltext erstellen, wir dieser String automatisch als eine Instanz von <code>String</code> erzeugt, dadurch stehen einige allgemeine Methoden und Eigenschaften zur Verfügung.</p>

<p>Wenn Sie im DOM folgende Zeilen verwenden,</p>

<pre class="brush: js notranslate">var myDiv = document.createElement('div');
var myVideo = document.querySelector('video');</pre>

<p>haben Sie Methoden verwendet, die von einer Instanz der Klasse <code><a href="/en-US/docs/Web/API/Document">Document</a></code> zur Verfügung gestellt wurden. Für jede geladene Webseite wird eine Instanz von <code>Document</code> erzeugt, die <code>document</code> genannt wird, welche die gesamte Struktur, den Inhalt und weitere Merkmale wie die URL repräsentiert. Dies bedeutet wiederum, dass einige allgemeine Methoden und Eigenschaften entsprechend verfügbar gemacht werden.</p>

<p>Das gleiche gilt für so ziemlich jedes andere built-in Objekt/API, welches Sie benutzt haben  — z.B. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, usw.</p>

<p>Beachten Sie, dass built-in Objekte/APIs nicht zwangsläufig immer automatisch eine Objektinstanz erzeugen. Ein Beispiel, die  <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — welche es modernen Browsern erlaubt, System Notifikationen zu generieren  — benötigt für jede zu sendende Notifikation eine neue Objektinstanz, die Sie durch Verwendung des Konstruktors erzeugen müssen. Versuchen Sie, folgendes in Ihrer JavaScript Konsole einzugeben:</p>

<pre class="brush: js notranslate">var myNotification = new Notification('Hello!');</pre>

<p>Konstruktoren werden wir in einem späteren Artikel detaillierter behandeln.</p>

<div class="note">
<p><strong>Bemerkung</strong>: Es ist nützlich, sich die Art, wie Objekte kommunizieren, als <strong>Nachrichtenweitergabe</strong> vorzustellen — wenn ein Objekt die Ausführung einer Aktion von einem anderen Objekt benötigt, wird es meist eine Nachricht an dieses Objekt mittels einer seiner Methoden senden und auf eine Antwort warten, welche wir als Rückgabewert bezeichnen.</p>
</div>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Glückwunsch, Sie haben das Ende unseres ersten JS Objekt Artikels erreicht —Sie sollten nun eine gute Vorstellung davon haben, wie man mit Objekten in JavaScript arbeitet — einschließlich der Erzeugung von eigenen, einfachen Objekte. Sie sollten auch zu schätzen wissen, dass Objekte als Daten- und Funktionsspeicherstrukturen sehr nützlich sind — wenn Sie versuchen würden, alle Eigenschaften und Methoden in unserem <code>person</code>-Objekt als einzelne Variablen bzw. Funktionen nachzuverfolgen, wäre das sehr ineffizient und frustrierend und wir würden riskieren, das gleichnamige Variablen kollidieren. Objekte lassen uns Informationen gefahrlos und sicher in ihrem jeweils eigenen Paket verstauen.</p>

<p>Im nächsten Artikel werden wir damit beginnen, uns die Theorie der objektorientierten Programmierung (OOP) anzusehen und wie solche Techniken in JavaScript umgesetzt werden können.</p>

<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>

<h2 id="In_diesem_Modul">In diesem Modul</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li>
</ul>