Quelltext der Seite JavaScript-Tutorium:Grundlagen

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.


=Überblick=


==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript


==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen


==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME


==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer


==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert


==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=


Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>


Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=


In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).


==Definition und Zuweisung==


Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>


Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>


Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>


Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>


Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>


==Hoisting==


Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.


Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>


'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.


==Globale Variablen==


Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
  var punktzahl = 2000;
  console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>


'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
  punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=


JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.


==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>


==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>


==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>


==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>


JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>


Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>


'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>


Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>


Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>


===Number API===


Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>


Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.


==String==


Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.


Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>


Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>


Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>


===String API===


Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>


Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=


==Gleichheit (==)==


Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.


Bei Typungleicheit werden folgenden Regeln angewendet:

  1. <code>null</code> und <code>undefined</code> sind gleich
  2. Strings werden in Zahlen konvertiert
  3. Boolsche Werte werden in Zahlen konvertiert
  4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
  5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>


'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>


==Identität==


Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>


'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.


==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollanweisung=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten dass folgende Ausdrücke als <code>false</code> interpretiert werden:
false, null, undefined, '', 0, NaN

<source lang="javascript">
if (!false) {
  console.log('!false ergibt true');
}

if (!null) {
  console.log('!null ergibt true');
  console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
  console.log('!undefined ergibt true');
  console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
  console.log('!"" ergibt true');
}

if (!NaN) {
  console.log('!NaN ergibt true');
}
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
  console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {
  
}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var countdown = 3;
switch (countdown) {
  case 3:
    console.log('3');
  case 2:
    console.log('2');
  case 1:
    console.log('1');
    break;
  default:
    console.log('0');
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits nicht <code>true</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var zaehler = 10;
while (zaehler--) {
  console.log(zaehler);
}

while (false) {
  console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert genauso wie die <code>while</code>-Schleife mit der Ausnahme dass der gegebene auf jeden
Fall einmal ausgeführt wird.

<source lang="javascript">
do {
  console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
  console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
  console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
  throw new Error('Custom error');
}
catch (error) {
  console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

'''Anmerkung:''' <code>for in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
  console.log(spieler[eigenschaft]);
}
</source>

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften. 
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  getName: function() {
    return this.vorname + ' ' + this.nachname;
  },
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
  return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
  if (person1.hasOwnProperty(eigenschaft)) {
    console.log(eigenschaft + ': ' + person1[eigenschaft]);
  }
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.


=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
  ['O', 'O', 'X'],
  ['O', 'X', 'X'],
  ['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop  verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
    console.log(index + ': ' + personenregister[index]);
}
</source>


=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen. 
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
  console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der 
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
  console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
  console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
  console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
  // ...
  zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
  return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
  return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
  return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
  return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
  if (arguments.length > 0) {
    return true;
  }
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht 
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
  return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
  var index = 0;
  for (var index = 0; index < eingabe.length; i++) {
    if (eingabe.charAt(index) == ' ') {
      index =  
    }
  }
  return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
  var erstelleVorname = function() {
    return 'Max';
  };
  var erstelleNachname = function() {
    return 'Mustermann';
  };

  return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  erstelleName: function() {
    return this.vorname + ' ' + this.nachname;
  },
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
  return a + b;
};

var substrahiere = function(a, b) {
  return addiere(a, -b);
};

var multipliziere = function(a, b) {
  return a * b;
};

var dividiere = function(a, b) {
  return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
  return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>



=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
  return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
  return {
    vorname: vorname, 
    nachname: nachname
    erstelleName: function() {
      return this.vorname + ' ' + this.nachname;
    }
  };
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
  this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
  this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error('Person is a constructor');
  }
  this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
  return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
  </source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
  this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
  return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
  this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>



=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit 
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
  console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
  var loggeThis = function() {
    console.log(this);
  };
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  erstelleName: function() {
    return this.vorname + ' ' + this.nachname
  }
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
  console.log(this);
};

person1 = {
  vorname: 'Max',
  nachname: 'Mustermann',
  loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
  this.erstelleInitialen = function() {
    return this.vorname.charAt(0) + this.nachname.charAt(1);
  }
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
  var i1 = this.vorname.charAt(0);
  var i2 = this.nachname.charAt(0);
  if (mitPunkten) {
     return i1 + '.' + i2 + '.';
  }
  return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>
  
Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
  var i1 = person.vorname.charAt(0);
  var i2 = person.nachname.charAt(0);
  if (mitPunkten) {
     return i1 + '.' + i2 + '.';
  }
  return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
  this.erstelleNamen = function() {
    return this.vorname + ' ' + this.nachname;
  };
};

var loggeErgebnisVonFunktion = function(funktion) {
  console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
  var self = this;
  self.vorname = vorname;
  self.nachname = nachname;
  self.erstelleNamen = function() {
    return self.vorname + ' ' + self.nachname;
  };
};

var loggeErgebnisVonFunktion = function(funktion) {
  console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>



=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
  return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
  erstelleInitialen: function() {
    return this.vorname + this.nachname;
  };
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
  return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist. 
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
  this.vorname = vorname;
  this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
  return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt. 

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.
 
<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
  anzahlErstellterFunktionen++;
  return function() {
    console.log('Hallo Welt');
  };
};

var Person = function() {
  this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
  personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
  console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
  this.sagHallo = function() {
    console.log('Hallo Welt');
  };
};

var Student = function() {
  this.schreibHtml = function() {
    console.log('<html><head></head><body></body></html>');
  };
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
  console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen 
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].


=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
  var logge = function(message) {
    console.log(prefix + message);
  };
  return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
  var name = vorname + ' ' + nachname;
  this.hatNamen = function(zuPruefenderName) {
    return name === zuPruefenderName;
  };
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.


<source lang="javascript">
var Person = function(vorname, nachname) {
  this._vorname = vorname;
  this._nachname = nachname;
  this._name = this._vorname + ' ' + this._nachname;
  this.hatNamen = function(zuPruefenderName) {
    return this._name === zuPruefenderName;
  };
}
</source>