Ich hatte letzte Woche auf die „Coole, leicht zu verstehende und sehr gut dokumentierte HTML5 und JavaScript Game Engine: Phaser.“ hingewiesen.

Mittlerweile habe ich mich ein wenig mit der Engine auseinandergesetzt, erste Tutorials gemacht und einige Erfahrungen damit gesammelt.

Das Hauptproblem, welches ich von Anfang an hatte, war, dass der Code so unstrukturiert ist. Keine Klassen, alles in einer Datei, keine privaten Methoden, alles irgendwie chaotisch.

Das muss besser gehen!, sagte ich mir und versuchte mich im Internet schlau zu machen. Ich habe auch sehr viele (sicherlich gute) Quellen gefunden, die mein Problem adressierten, aber verstanden habe ich es nicht und irgendwie fühlte es sich auch nicht gut an.

Das Problem lag aber an mir. Ich hatte einfach zu wenig Erfahrung mit JavaScript. Ich habe die Lösungen nicht verstanden, weil JavaScript vom Grunde her gar nicht darauf ausgelegt ist, so genutzt zu werden, wie ich mir das vorgestellt habe.

Zufällig bin ich dann über ein Buch gestolpert, welches einen vielversprechenden Titel trägt: „JavaScript objektorientiert“ von Nicholas C. Zakas.

Nach der Lektüre der etwa 115 Seiten kann ich von mir behaupten, ich habe JavaScript verstanden. Ich bin sicher weit davon entfernt, ein Profi zu sein, aber ich verstehe die Sprache, die Unterschiede zu objektorientierten Sprachen.  Ich kann mittlerweile einige Konstrukte herstellen, die ich zunächst vermisst habe. Ich habe erkannt das einige objektorientierte Ansätze in JavaScript einfach keinen Sinn ergeben.

Die wichtigsten Erkenntnisse schreibe ich hier noch einmal kurz zusammen. Das Buch sollte auf jeden Fall jeder lesen, der von Java, C#, C++ oder ähnlichen Sprachen kommt und mit JavaScript arbeiten möchte.

• Generell

• • Es gibt keine Klassen, nur Objekte
• • Funktionen sollten „strict“ verwendet werden um den Code gezwungener Maßen sauberer zu halten (wer hat da gerade „Option Explicit“ gesagt?)
    
    JavaScript

    function foo(par1, par2) { 'use strict'; [....] }

    1 2 3 4

    function foo(par1, par2) {     'use strict';     [....] }

• Standardobjekte sollten nicht erweitert werden

• Primitive Typen und Referenztypen
  • funktionieren wie in den objektorientierten Sprachen auch
  • Besonderheiten sind „null“ und „undefined“
  • Objekte sind dynamisch erweiterbar – immer [Ausnahme: extensible]
    foo.bar = „newbar“
  • Entfernen geht ebenfalls: delete foo.bar;
  • Objekten können Funktionen hinzugefügt werden (Methoden)
    
    JavaScript

    var foo = { bar: "boo", far: function() { console.log("go far"); } };

    1 2 3 4 5 6

    var foo = {     bar: "boo",     far: function() {         console.log("go far");     } };

• Funktionen
  • als Deklaration: function foo(par1, par2) {
  • als Ausdruck: var bar = function foo(par1, par2) {
  • Funktionen können als Werte verwendet werden
  • Funktionen sind „object“
  • Parameter sind benannt, können aber auch als array abgerufen werden (arguments[x])
  • Überladung funktioniert nicht. Die letzte Methode gleichen Namens im Code gewinnt; nur durch interne Parameterprüfung möglich
  • Methoden call, apply und bind auf Funktionen möglich

• Objekte
  • Eigenschaftsattribute:
    • enumerable   -> Eigenschaften können aufgezählt werden
    • configurable -> Objekt kann geändert werden
    • writeable    -> Wert kann geändert werden
    • extensible   -> Objekt kann erweitert werden
    • seal         -> Objekt kann nicht erweitert und es können keine Eigenschaften entfernt werden
    • freeze       Objekt kann nicht erweitert und es können keine Eigenschaften entfernt werden, Werte können nicht geändert werden
  • Zugriffseigenschaften
    
    JavaScript

    var foo = { _bar: "boo", get bar() { return this._bar; }, set(value) { this._bar = value; } };

    1 2 3 4 5 6 7 8 9

    var foo = {     _bar: "boo",     get bar() {         return this._bar;     },     set(value) {         this._bar = value;     } };

• Konstruktoren und Prototypen
  • Konstruktoren sind Funktionen wie alle anderen
  • Konstruktoren schreibt man per Konvention groß: function Foo(par1, par2) {
  • Instanzen werden mit new erstellt
  • Klassenähnliche Konstrukte lassen sich über Prototypen erstellen
    
    JavaScript

    function Foo(value) = { this.bar = value; } Foo.prototype = { constructor: Foo; far: function() { console.log("go far" + this.bar); } }; var one = new Foo("1"); var two = new Foo("2"); one.far(); // go far 1 two.far(); // go far 2

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    function Foo(value) = {     this.bar = value; }   Foo.prototype = {     constructor: Foo;     far: function() {         console.log("go far" + this.bar);     } };   var one = new Foo("1"); var two = new Foo("2"); one.far(); // go far 1 two.far(); // go far 2

  • Es ist möglich Prototypen ineinander zu schachteln um Vererbung zu erreichen
  • Man kann Methoden (auch den Konstruktor) des Parents aufrufen (via Parent.call(this, …))

Darüber hinaus gibt es noch einige weiterführende Konzepte:

• Module Pattern
• Konstruktoren, Prototypen und Instanzen