path: root/files/de/web/javascript/closures/index.html

---
title: Closures (Funktionsabschlüsse)
slug: Web/JavaScript/Closures
tags:
  - Closure
  - ES5
  - Intermediate
  - JavaScript
  - Reference
translation_of: Web/JavaScript/Closures
---
<div>{{jsSidebar("Intermediate")}}<br>
 </div>

<p class="summary"><em>Closures</em> sind Funktionen mit unabhängigen, freien Variablen. Anders ausgedrückt: Die in der <em>Closure</em> definierte Funktion merkt sich die Umgebung, in der sie erzeugt wurde.</p>

<h2 id="Lexical_scoping">Lexical scoping</h2>

<h3 id="Lexikalischer_Geltungsbereich">Lexikalischer Geltungsbereich</h3>

<p>Betrachten wir folgendes Beispiel:</p>

<div>
<pre class="brush: js notranslate">function init() {
  var name = "Mozilla"; // name ist eine von init erzeugte lokale Variable
  function displayName() { // displayName() ist die innere, umschlossene Funktion, sprich die 'Closure'
    alert(name); // hier wird die in der umschließenden Eltern-Funktion deklarierte Variable benutzt
  }
  displayName();
}
init();</pre>
</div>

<p><code>init()</code> erzeugt eine lokale Variable <code>name</code> und anschließend eine Funktion <code>displayName()</code>. <code>displayName()</code> ist eine interne Funktion definiert in <code>init()</code> und ist ausschließlich im Rahmen dieser Funktion verfügbar. <code>displayName()</code> besitzt keine eigenen lokalen Variablen, hat jedoch Zugriff auf Variablen umgebender Funktionen und kann darum die Variable <code>name</code> aus der umschließenden Eltern-Funktion abrufen.</p>

<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>

<p>Dieses <a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Code-Beispiel</a> zeigt, dass es funktioniert. Es handelt sich hier um einen lexikalischen Geltungsbereich (<em>lexical</em> <em>scoping</em>), d.h. in JavaScript wird der Geltungsbereich (<em>scope</em>) einer Variablen bestimmt durch ihren Fundort im Quellcode (darum lexikalisch). Und verschachtelte Funktionen haben Zugriff auf Variablen, die im umschließenden Geltungsbereich (<em>outer scope</em>) deklariert werden.</p>

<h2 id="Closure">Closure</h2>

<h3 id="Funktionsabschluss">Funktionsabschluss</h3>

<p>Betrachten wir folgendes Beispiel:</p>

<pre class="brush: js notranslate">function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();
</pre>

<p>Zum Laufen gebracht zeigt dieser Code exakt den gleichen Effekt wie das vorherige <code>init()</code> Beispiel: Die Zeichenfolge "Mozilla" wird als JavaScript <em>alert</em> Meldung angezeigt. Der interessante Unterschied besteht darin, dass die innere Funktion <code>displayName()</code> von der äußeren Funktion schon vor ihrer Ausführung zurückgegeben wurde.</p>

<p>Dass der Code weiterhin funktioniert, mag verwundern. Üblicherweise existieren die in einer Funktion enthaltenen lokalen Variablen nur während ihrer Ausführung. Man könnte also annehmen, dass die Variable <code>name</code> nicht mehr abrufbar ist, nachdem <code>makeFunc()</code> geendet hat. Da der Code trotzdem funktioniert, ist dies offensichtlich nicht der Fall.</p>

<p>Des Rätsels Lösung ist, dass <code>myFunc</code> zu einem Funktionsabschluss, einer <em>Closure</em>, geworden ist. Die <em>Closure</em> ist ein besonderes Objekt mit zwei außergewöhnlichen Merkmalen – sie umfasst sowohl die Funktion, wie auch das Umfeld, in dem diese erzeugt wurde. Dieses Umfeld besteht aus sämtlichen lokalen Variablen, die im Geltungsbereich (<em>Scope</em>) lagen zum Zeitpunkt der Erzeugung der <em>Closure.</em> Im obigen Beispiel ist <code>myFunc</code> eine <em>Closure</em>, die sowohl die Funktion <em>myFunc</em>, wie auch die Zeichenfolge "Mozilla", die bei der Erzeugung der <em>Closure</em> exisitierte, umfasst. </p>

<p>Hier nun ein etwas interessanteres Beispiel, eine <code>makeAdder()</code> Funktion:</p>

<pre class="brush: js notranslate">function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12
</pre>

<p>In diesem Beispiel haben wir eine Funktion <code>makeAdder(x)</code> definiert, die ein einzelnes Argument <code>x</code> erwartet und eine neue Funktion zurück gibt. Die zurückgegebene Funktion erwartet ein Argument <code>y</code> und liefert die Summe von <code>x</code> und <code>y</code> als Ergebnis.</p>

<p>Die Funktion <code>makeAdder</code> ist im Wesentlichen eine Factory für spezielle Funktionen: sie erzeugt  Funktionen, welche ihrem Argument einen bestimmten Wert hinzuaddieren. Im vorangegangenen Beispiel erzeugen wir mittels dieser Factory zwei neue Funktionen: eine von ihnen addiert 5 zu ihrem Argument, die andere addiert 10 hinzu.</p>

<p><code>add5</code> und <code>add10</code> sind beides Closures. Sie teilen beide den selben Funktionsrumpf, behalten aber verschiedene Kontexte. In <code>add5</code>'s Kontext ist <code>x</code> 5, im Kontext von <code>add10</code> ist <code>x</code> 10.</p>

<h2 id="Practical_closures">Practical closures</h2>

<h3 id="Closures_in_der_Praxis">Closures in der Praxis</h3>

<p>Soviel zur Theorie von Closures — aber gibt es tatsächlich einen Praxisnutzen? Betrachten wir dafür die Auswirkungen in der Praxis. Ein Closure lässt uns Daten (die Ausführungsumgebung) mit einer Funktion, die auf diesen Daten operiert, verbinden. Das hat offensichtliche Parallelen zur objektorientierten Programmierung, bei der die Daten eines Objekts (die Objekteigenschaften) mit einer oder mehreren Methoden verbunden werden. Somit kann ein Closure immer dann verwendet werden, wo normalerweise ein Objekt mit einer einzigen Methode verwendet wird.</p>

<p>Besonders im Web kommt uns das häufig entgegen. Ein Großteil von JavaScript-Code ist ereignisbasierter Code: wir definieren erst ein Verhalten, und hängen es dann an ein Benutzerereignis (bspw. einen Mausklick oder Tastendruck). Unser Code nimmt dabei üblicherweise die Form eines Callback an: eine einzelne Funktion, die bei Eintreten des Ereignisses aufgerufen wird.</p>

<p>Hier ein Beispiel aus der Praxis: Angenommen, wir wollen Buttons auf einer Seite hinzufügen, die die Schriftgröße ändern – eine Möglichkeit wäre, die Schriftgröße mittels der Eigenschaft <code>font-size</code> im <code>body</code>-Element in Pixel (<code>px</code>) zu setzen und bei anderen Elementen der Seite (z.B. <em>header</em>-Elemente wie <code>h1</code>, <code>h2</code>) die Eigenschaft <code>font-size</code> in der relativen Einheit <code>em</code> anzugeben:</p>

<pre class="brush: css notranslate">body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}
</pre>

<p>Unser interaktiver Schriftgößen-Button ändert die <code>font-size</code>-Eigenschaft des <code>body</code>-Elements. Diese Änderung wird von den anderen Elementen auf der Seite wahrgenommen und die Elemente passen sich dank der relativen Einheit <code>em</code> nun der neuen Schriftgröße an.</p>

<p>Hier das JavaScript:</p>

<pre class="brush: js notranslate">function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
</pre>

<p><code>size12</code>, <code>size14</code> und <code>size16</code> sind nun Funktionen, die den <code>body</code>-Text in Schriftgröße 12 Pixel, 14 Pixel oder 16 Pixel ändern. Diese Funktionen können nun wie folgt als Buttons (in diesem Fall als Links) hinzugefügt werden:</p>

<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
</pre>

<pre class="brush: html notranslate">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
</pre>

<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726/","","200")}}</p>

<h2 id="Emulation_privater_Methoden_mit_Hilfe_von_Closures">Emulation privater Methoden mit Hilfe von Closures</h2>

<p>Sprachen wie Java bieten die Möglichkeit Methoden als privat zu deklarieren, was bedeutet, dass sie nur von anderen Methoden der gleichen Klasse aufgerufen werden können.</p>

<p>Dies ist in JavaScript nicht explizit vorgesehen, aber es kann mit Hilfe von Funtionsabschlüssen nachgebildet werden. Private Methoden sind nicht nur nützlich um den Zugriff auf Code einzuschränken: sie bieten auch ein mächtiges Werkzeug um den globalen Namensraum zu verwalten indem sie weniger wichtige Methoden vor dem öffentlichen Interface verbergen.</p>

<p>Das folgende Beispiel zeigt, wie man ein paar öffentliche Funktionen definiert, welche Zugriff auf private Funktionen und Variablen haben, indem man <em>Closures </em>verwendet. Die ist auch als <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a> bekannt:</p>

<pre class="brush: js notranslate">var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1
</pre>

<p>In den vorhergehenden Beispielen hatte jede <em>Closure </em>ihr eigenes Umfeld; hier erzeugen wir ein einziges Umfeld, welches von 3 Funktionen geteilt wird: <code>counter.increment</code>, <code>counter.decrement</code> und <code>counter.value</code>.</p>

<p>Das gemeinsame Umfeld wird im Inneren einer anonymen Funktion erzeugt, welche nach der Definition auch gleich aufgerufen wird. Das Umfeld enthält 2 private Dinge: eine Variable mit dem Namen <code>privateCounter</code> und eine Funktion mit dem Namen <code>changeBy</code>. Auf keines von diesen privaten Dingen kann von ausserhalb der anonymen Funktion zugegriffen werden. Statt dessen muß auf sie mit Hilfe der drei öffentlichen Funktionen zugegriffen werden, welche von der anonymen Funktion zurueckgegeben werden.</p>

<p>Diese drei öffentlichen Funktionen sind <em>Closures</em>, welche das gleiche Umfeld teilen. Wegen JavaScripts lexikalischem Geltungsbereich haben sie alle Zugriff auf die <code>privateCounter</code> Variable und die <code>changeBy</code> Funktion.</p>

<div class="note">
<p>Du siehst: wir definieren eine anonyme Funktion, die einen Zähler erzeugt, und dann rufen wir sie unmittelbar auf und weisen das Ergebnis der <code>counter</code> Variablen zu. Wir könnten diese Funktion in einer separaten Variablen <code>makeCounter</code> speichern und sie zum Erzeugen mehrerer Zähler benutzen.</p>
</div>

<pre class="brush: js notranslate">var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* Alerts 0 */
counter1.increment();
counter1.increment();
alert(counter1.value()); /* Alerts 2 */
counter1.decrement();
alert(counter1.value()); /* Alerts 1 */
alert(counter2.value()); /* Alerts 0 */
</pre>

<p>Beachte wie jeder der zwei Zähler, <code>counter1</code> und <code>counter2</code>, seine Unabhängigkeit vom anderen erhält. Jede <em>Closure </em>referenziert eine andere Version der <code>privateCounter</code> Variablen durch ihren eigene Closure. Jedes mal, wenn einer der Zähler aufgerufen wird, ändert sich das lexikalische Umfeld durch ändern des Wertes dieser Variablen; jedoch haben Änderungen des Wertes der Variablen in der einen <em>Closure</em> keinen Einfluss auf den Wert in der anderen <em>Closure</em>.</p>

<div class="note">
<p>Diese Art <em>Closures </em>zu verwenden bietet einige Vorteile, die man der Objekt orientierten Progammierung zuspricht, insbesondere Daten verbergen und Klammerung.</p>
</div>

<h2 id="Closure_Scope_Chain">Closure Scope Chain</h2>

<h3 id="Kette_von_Closure_Geltungsbereichen">Kette von Closure Geltungsbereichen</h3>

<p>Für jede <em>Closure </em>haben wir drei Geltungsbereiche:</p>

<ul>
 <li>Lokaler Geltungsbereich (Eigener Geltungsbereich)</li>
 <li>Geltungsbereich der Äusseren Funktionen</li>
 <li>Globaler Geltungsbereich</li>
</ul>

<p>Wir haben also drei Geltungsbereiche für eine <em>Closure</em>. Aber häufig machen wir Fehler, wenn wir geschachtelte innere Funktionen haben. Betrachten wir das folgende Beispiel:</p>

<pre class="brush: js notranslate">// global scope
var e = 10;
function sum(a){
  return function(b){
    return function(c){
      // outer functions scope
      return function(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

console.log(sum(1)(2)(3)(4)); // log 20

// We can also write without anonymous functions:

// global scope
var e = 10;
function sum(a){
  return function sum2(b){
    return function sum3(c){
      // outer functions scope
      return function sum4(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

var s = sum(1);
var s1 = s(2);
var s2 = s1(3);
var s3 = s2(4);
console.log(s3) //log 20
</pre>

<p>Also in dem obigen Beispiel haben wir eine Serie von geschachtelten Funktionen, die alle Zugriff auf den Geltungsbereich der äusseren Funktionen haben aber fälschlicherweise oft angenommen wird, dass sie Zugriff nur auf den Geltungsbereich der nächsten äusseren Funktion haben. Zur Verdeutlichung kann man sagen, dass alle <em>Closures </em>Zugriff auf die Geltungsbereiche aller Funktionen haben, innerhalb derer sie deklariert sind.</p>

<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2>

<h3 id="Erzeugen_von_Closures_in_Schleifen_Ein_häufiger_Fehler">Erzeugen von <em>Closures </em>in Schleifen: Ein häufiger Fehler</h3>

<p>Vor der Einführung des <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let" title="let"><code>let</code></a> Schlüsselwortes in ECMAScript 6, gab es ein häufiges Problem mit <em>Closures</em>, wenn sie innerhalb einer Schleife erzeugt wurden. Hier ein Beispiel:</p>

<pre class="brush: html notranslate">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
</pre>

<pre class="brush: js notranslate">function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i &lt; helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();
</pre>

<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/8164/", "", 200)}}</p>

<p>Das <code>helpText</code> Array definiert drei Hilfshinweise, die jeweils mit der ID eines Eingabefeldes verknüpft sind. Die Schleife geht durch diese Definitionen und hängt an das <code>onfocus</code> Ereignis die entsprechende Hilfemethode.</p>

<p>Wenn du aber diesen Code ausprobierst, wirst du sehen, dass er nicht tut was er sollte. Egal auf welches Feld du den Fokus gibst, es wird immer die Meldung über dein Alter gezeigt.</p>

<p>Der Grund dafür ist, dass die Callbacks, die an <code>onfocus</code> gehängt sind, <em>Closures </em>sind; sie bestehen aus der Funktionsdefinition und dem Umfeld aus dem Geltungsbereich von <code>setupHelp</code>. Drei <em>Closures</em> wurden von der Schleife erzeugt, aber jede benutzt das gleiche gemeinsame lexikalische Umfeld, das eine Variable mit sich änderndem Wert besitzt (<code>item.help</code>). Der Wert von <code>item.help</code> wird bestimmt, wenn die <code>onfocus</code> Callbacks ausgeführt werden. Weil aber die Schleife zu dieser Zeit bereits gelaufen ist, zeigt das <code>item</code> Objekt (das von allen drei <em>Closures </em>geteilt wird) weiterhin auf den letzten Eintrag in der <code>helpText</code> Liste.</p>

<p>Eine Lösung ist in diesem Fall die Benutzung von mehreren <em>Closures</em>: insbesondere, eine Funktionsfabrik zu benutzten wie früher beschrieben:</p>

<pre class="brush: js notranslate">function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function makeHelpCallback(help) {
  return function() {
    showHelp(help);
  };
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i &lt; helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}

setupHelp();
</pre>

<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/9573/", "", 300)}}</p>

<p>Das tut wie erwartet. Anstatt den Callbacks ein gemeinsames lexikales Umfeld zu geben erzeugt die <code>makeHelpCallback</code> Funktion ein neues lexikalisches Umfeld für jeden Callback, in dem sich <code>help</code> auf den entsprechenden String aus dem <code>helpText</code> Array bezieht.</p>

<p>Ein anderer Weg das obige mit einer anonymonen <em>Closure</em> zu schreiben ist:</p>

<pre class="brush: js notranslate">function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i &lt; helpText.length; i++) {
    (function() {
       var item = helpText[i];
       document.getElementById(item.id).onfocus = function() {
         showHelp(item.help);
       }
    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
  }
}

setupHelp();</pre>

<p>Wenn du nicht mehrere <em>Closures </em>benutzten möchtest, kannst du das <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let">let</a></code> Schlüsselwort benutzen, das in ES2015 eingeführt wurde:</p>

<pre class="brush: js notranslate">function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i &lt; helpText.length; i++) {
    let item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();</pre>

<p>Dieses Beispiel benutzt <code>let</code> anstatt <code>var</code>, so dass jede Closure die blocksichtbare Variable bindet, was bedeutet, dass keine zusätzlichen <em>Closures </em>gebraucht werden.</p>

<p>Eine weitere Alternative könnte sein <code>forEach()</code> für die Iteration über das <code>helpText</code> Array zu benutzen und einen Callback für jeden {{htmlelement("div")}} zuzuweisen, wie hier gezeigt:</p>

<pre class="brush: js notranslate">function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  helpText.forEach(function(text) {
    document.getElementById(text.id).onfocus = function() {
      showHelp(text.help);
    }
  });
}

setupHelp();</pre>

<h2 id="Performance_considerations">Performance considerations</h2>

<h3 id="Effizienzbetrachtungen">Effizienzbetrachtungen</h3>

<p>Es ist unklug unnötigerweise Funktionen innerhalb anderer Funktionen zu erzeugen, wenn <em>Closures </em>für eine bestimmte Aufgabe nicht gebraucht werden. Denn es hat negativen Einfluss auf die Scripteffizienz sowohl in Bezug auf Geschwindigkeit als auch Speicherbedarf.</p>

<p>Wenn zum Beispiel ein neues Objekt/Klasse erzeugt wird, sollten die Methoden mit dem Prototypen des Objekts verbunden sein anstatt im Objektkonstuktor erzeugt werden. Der Grund ist, dass immer wenn der Konstruktor aufgerufen wird, die Methoden neu zugewiesen würden (das heisst, für jede Objekterzeugung).</p>

<p>Betrachte folgenden Fall:</p>

<pre class="brush: js notranslate">function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}
</pre>

<p>Da der vorliegende Code die Vorteile von <em>Closures </em>in diesem speziellen Fall nicht nutzt, könnten wir ihn umschreiben so dass wir die <em>Closure </em>vermeiden:</p>

<pre class="brush: js notranslate">function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};
</pre>

<p>Es wird jedoch nicht empfohlen, den Prototyp neu zu definieren. Das folgende Beispiel erweitert statt dessen den existierenden Prototyp:</p>

<pre class="brush: js notranslate">function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};
</pre>

<p>In den zwei vorhergehenden Beispielen kann der vererbte Prototyp von allen Objekten benutzt werden und die Definition der Methoden muss nicht bei jeder Objekterzeugung durchgeführt werden. Weitere Informationen unter <a href="/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details zum Objektmodell</a>.</p>