Einführung in objektorientiertes JavaScript

Aus irgendeinem Grund gibt es in der IT-Branche die Tendenz, die Ansicht zu vertreten, dass Sie, wenn Sie keine objektorientierten Programmiermethoden (OOP-Methoden) verwenden, kein "echter Programmierer" sind. Das ist eigentlich eine etwas dumme Haltung, denn es gibt viele Situationen, in denen OOP nicht der geeignetste Weg ist, um ein Problem anzugehen. Dies ist der Fehler in Sprachen wie Java, die OOP in jede Programmieraufgabe zwingen, ob Sie es brauchen oder nicht.

JavaScript (das fast nichts mit Java zu tun hat) ist eine ganz andere Sprache. Es bietet nahezu unbegrenzte Freiheit und Vielseitigkeit bei reduzierter Komplexität in den meisten Bereichen. Leider gibt es einige Dinge, die in JavaScript aufgrund der Freiheit, die es Ihnen zu geben versucht, komplizierter sind.

Warum OOP nicht immer für jede Aufgabe geeignet ist, besteht darin, dass ein Programm komplexer wird und oft zusätzliche Schritte, mehr Arbeit und mehr Dinge erfordert, die möglicherweise schief gehen, wenn Sie nicht aufpassen. OOP kann jedoch auch viele Vorteile bieten, wenn es in Situationen eingesetzt wird, in denen es angebracht ist.

Der wichtigste Vorteil, den OOP bieten kann, ist die Replikation. Das heißt, wir können ein Objekt klonen und es mehrmals im selben Programm wiederverwenden, wann immer wir es brauchen. Die implizierte Komplexität und die Tatsache, dass JavaScript nicht von Anfang an zu einer OOP-Sprache (und somit zu mehr Komplexität) wird, ist einer der Gründe, warum OOP für viele junge JavaScript-Programmierer die letzte Grenze darstellt, bevor sie sich ihre Flügel verdienen.

OK, es ist schwer, aber es ist nicht so schwer

Bevor Sie anfangen zu denken, dass das Konzept von Object Oriented JavaScript zu viel für Sie ist, sollten Sie OOP bereits verwenden, auch wenn Sie sich dessen nicht bewusst sind. Puristen mögen dem nicht zustimmen, aber ich denke, man kann sagen, dass, wenn Sie bereits HTML und CSS verwenden und Sie gelegentlich JavaScript verwendet haben, um HTML-Elemente auf einer Webseite zu bearbeiten, Sie bereits ein erfahrener OOP-Programmierer sind.

Jedes HTML-Element auf einer Webseite ist tatsächlich ein Objekt. Sie alle passen in die Hierarchie des Document Object Model (DOM), das heißt, sie verfügen über eine definierte Klasse, definierte Eigenschaften und definierte Vererbung. Wenn Sie nicht explizit einen Eigenschaftswert festlegen, verwenden alle Objekte ihre Standardeigenschaftswerte. Wenn Sie eine CSS-Anweisung schreiben, werden Sie mit einer Methode einen oder mehrere Eigenschaftswerte einer Klasse ändern.

Jedes Mal, wenn Sie eine HTML-Anweisung schreiben, erstellen Sie eine neue Instanz einer Klasse. Und wie Sie sicherlich wissen, können Sie auf der Grundlage der vordefinierten Klasse jedes Objekttyps eigene Klassen erstellen (z. B. können Sie <h2 class = "subheading">) erstellen, die möglicherweise sehr unterschiedliche Eigenschaften von der ursprünglichen Klasse haben es wurde aus) erstellt. Sie können angeben, dass H2-Objekte mit dieser Klasse eine andere Farbe und Größe als die regulären H2-Objekte haben. Sie können diese geänderten Objekte beliebig oft wiederverwenden. Das ursprüngliche H2-Objekt ist eine Objektvorlage, und Ihre neue Klasse wird von der Vorlagenklasse abgeleitet.

Also ja, OOP ist nicht einfach, aber du machst es wahrscheinlich schon, also, wovor solltest du Angst haben?

Die nächste Stufe: Eigene Objekte erstellen

Das Arbeiten mit integrierten DOM-Objekten ist zu einfach. Du brauchst mehr Herausforderungen. Das Erstellen eigener Objekte ist der erste Schritt zu einer höheren OOP-Stufe.

Bei dieser Präambel erwarten Sie wahrscheinlich, dass das Erstellen eines Objekts eine große Sache ist und viel komplexen Code erfordert. Wenn Sie jemals versucht haben, benutzerdefinierte Objektklassen in einer Sprache wie Java oder C # zu erstellen, erwarten Sie sicherlich einen längeren Klassenkonstruktor. So machen wir es in JavaScript:

Nun, das war anti-klimatisch, oder? Wir haben dort ein leeres Objekt der Klasse "myObject" erstellt. Offensichtlich sind leere Objekte langweilig, weil sie nichts tun, außer Speicherplatz zu beanspruchen. Um nützlich zu sein, muss ein Objekt Inhalte haben. Betrachten wir eine praktischere Klasse:

Das Obige zeigt ein Objekt mit dem Namen objAlien, in dem alle diese verschiedenen Eigenschaften (gewöhnlichen Variablen) und Methoden (Funktionen) definiert sind. Technisch gesehen können Sie ein Objekt auch als ein Array von Variablen und / oder Funktionen betrachten.

Verwenden von Objekten in einem Programm

Nachdem ein Objekt definiert wurde, können Sie es in Ihren Programmen referenzieren. In einem Spiel hätten Sie mehrere Aliens, aber das Schreiben von Code für jeden einzelnen Alien würde das Programm zu umständlich machen. Besser ist es, ein Array zum Speichern aller Aliens zu erstellen und anschließend die Alien-Klasse zum Erstellen neuer Aliens zu verwenden. Zum Beispiel:

Dieser Code würde dazu führen, dass 20 grüne Aliens schleimig wird, die 110-Pixel voneinander trennen (daher könnten wir davon ausgehen, dass das zum Speichern des Aliens verwendete Bild 100px breit ist und zwischen jedem Alien ein 10px-Abstand besteht). Natürlich ist dies natürlich keine gute Möglichkeit, ein Spiel in JavaScript zu implementieren, da es bessere Techniken gibt, aber in diesem Artikel geht es nicht um das Erstellen von Spielen, sondern um das Erstellen und Verwenden von Objekten.

Objekte müssen nicht immer mit dem neuen Schlüsselwort hinzugefügt werden. Hier ist ein Beispielcode aus einem Projekt, in dem ein Objekt seine eigenen Eigenschaften unter Verwendung der Werte eines anderen Objekts festlegt:

Hier sehen wir eine sehr komplexe Art der Verwendung eines Objekts, bei der die Werte des Objekts an die Eigenschaft attr des R-Objekts übergeben werden. Wenn Sie mit JSON (JavaScript Object Notation) vertraut sind, denken Sie vielleicht, dass der erste Teil des Beispiels JSON mit Syntaxfehlern verwendet. Tatsächlich handelt es sich jedoch nicht um JSON-Code.

Die Anführungszeichen der Variablennamen mit Ausnahme von fill sind, um zu verhindern, dass JavaScript den Minus-Operator in den Variablennamen (die CSS-Eigenschaften) verarbeiten. Seit das Programm geschrieben wurde, wurden Änderungen vorgenommen, damit CSS-Eigenschaften wie font-family als fontFamily geschrieben werden können. Dieser ältere Code wurde jedoch nicht angepasst, um diese Änderung zu nutzen.

Warum Objekte verwenden?

Objekte eignen sich am besten für Situationen, in denen Sie mehrere Instanzen erstellen müssen oder eine einfache Methode zum Gruppieren von Daten benötigen, die sich auf einen bestimmten Typ beziehen. Im obigen Spielbeispiel können wir sehen, dass es möglich war, mehrere Kopien des Objekts objAlien zu erstellen. Wir können jedoch auch Eigenschaften des Objekts bearbeiten, nachdem wir es hinzugefügt haben. Dies war im Fall des Beispiels die x -Eigenschaft.

Wann keine Objekte verwenden?

Sie sollten keine Objekte verwenden, wenn Sie sie nicht wirklich benötigen. Es ist sinnlos, Ihre Programme ohne triftigen Grund zu komplizieren. Wenn Ihr Programm auf etwas einfaches ausgelegt ist, sollten keine OOP-Techniken erforderlich sein.

Warum JavaScript-Objekte einfacher zu erstellen sind als Objekte in anderen OOP-Sprachen

In Sprachen wie Java und sogar Visual Basic ist das Erstellen von Objekten eine große Aufgabe. Dies liegt daran, dass Sie eine Klassenvorlage erstellen (oder eine vorhandene verwenden müssen), auf der Ihr Objekt basieren soll, bevor Sie es definieren können. Das ist in JavaScript nicht notwendig, da uns eine einfache Konstruktionstechnik gegeben wird (objectname = {…}). Objekte in JavaScript können auch jeden Variablentyp einschließlich Arrays enthalten, und Typdeklarationen sind nicht vorhanden. Rückgabewerte sind optional.

Ob es eine gute oder eine schlechte Sache ist, ist eine Frage einiger Debatten, aber JavaScript-Programme werden auch nicht versagen, wenn Sie versuchen, einen Eigenschaftswert abzurufen, der nicht vorhanden ist. Wenn Sie beispielsweise Folgendes eingegeben haben:

Sie würden zu Recht erwarten, dass die obige Codezeile 5 in das Element mit der ID "par1" einfügt. Aber wenn Sie so etwas eingeben würden:

Sie würden den Lieblingsgeschmack des Aliens nicht sehen. In par1 erscheinen undefined. Für die meisten Anwendungen wäre dies kein Problem, aber für einige wäre es das. In diesen Fällen müssen Sie darauf vorbereitet sein und Code schreiben, der auf gültige Werte prüft, bevor Sie sich darauf verlassen.

Eine Möglichkeit, dies zu testen, ist:

Diese Reaktion ist etwas extrem, aber Sie haben die Idee. Beachten Sie, dass wir auf "! ==" und nicht auf "! =" Testen, was leicht zu verwechseln ist. Hier ist eine andere Möglichkeit:

Gleiche, andere Art und Weise. Sie können Objekten auch Eigenschaften hinzufügen, nachdem Sie sie erstellt haben. Das kannst du so machen:

Natürlich können Sie auch die Werte der Eigenschaften auf dieselbe Weise ändern. Um die favoriteFlavor-Eigenschaft aus dem Objekt zu entfernen, müssen Sie Folgendes tun:

Es gibt nur sehr wenige Situationen, in denen dies jemals erforderlich wäre.

Objekte wiederverwendbar machen

Sie haben wahrscheinlich das größte potenzielle Problem beim Erstellen von Objekten bemerkt, das heißt, wenn Sie verschiedene Arten von Aliens haben möchten, müssen Sie die Eigenschaft objAlien.type zu einem Array machen. Aber es gibt einen anderen Weg, der besser ist.

Diese Technik wird als Objektprototyping bezeichnet. Dies bedeutet, dass Sie eine grundlegende Vorlage für das Objekt erstellen, jedoch nicht alle Details angeben. Auch hier nähern wir uns der realen Art, Objekte zu einem Spiel hinzuzufügen.

Sie können jetzt sehen, dass die Methoden des Objekts definiert sind, aber die meisten Eigenschaften sind nicht definiert. Anstatt eine einfache Variable zu sein, wird die Objektdeklaration jetzt in eine Funktion eingeschlossen. Dies liegt daran, dass sie noch kein Objekt ist. Es ist nur ein Prototyp eines Objekts, das beschreibt, wie das Objekt erstellt wird, ohne es tatsächlich zu erstellen.

Um nun Objekte basierend auf dem Prototyp zu erstellen, können wir Folgendes tun:

Das ist das Gleiche wie folgt:

Da wir einen Prototyp erstellt haben, mussten wir ihn nicht auf die zweite Art machen, und es ist viel einfacher, verschiedene Arten von Aliens mit unterschiedlichen Geschwindigkeiten, Waffen, Waffen und Startpositionen zu deklarieren.

Was als nächstes?

Dieser Artikel war eine Einführung in objektorientiertes JavaScript, das hoffentlich das Thema entmystifiziert und weniger einschüchternd erscheinen ließ. Wir haben alle Grundlagen behandelt, darunter das Erstellen einfacher Objekte, das Hinzufügen, Entfernen und Ändern von Eigenschaften, das Deklarieren und Verwenden von Methoden sowie die Verwendung von Prototypen, um die Wiederverwendung von Objekten zu erleichtern. Aber es gibt noch viel mehr zu lernen. Jetzt, da Sie einen guten Ausgangspunkt haben, können Sie mit jedem Tutorial oder jeder Lektion zu fortgeschrittener OOP mit Zuversicht vorgehen.

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.