So halten Sie Ihren Code mit der Objektkapselung sauber

Verkapselung bedeutet, etwas isoliert zu halten. Wenn Sie etwas in eine Kapsel geben, kann die Außenwelt nicht darauf zugreifen. Die Kapselung ist ein wichtiges Konzept in der objektorientierten Programmierung, da sie dazu beiträgt, komplexen Code überschaubar zu halten.

Warum Sie Klassen brauchen

Angenommen, Sie haben eine Streichelzoo-App mit Hunderttausenden von Codezeilen. Stellen Sie sich nun vor, dass es ein sehr wichtiges Objekt gibt, das für die gesamte Anwendung von zentraler Bedeutung ist, das Tier . Was wäre, wenn jeder einzelne Teil des Programms, der ein Tier war, auf dieses Objekt zugreifen und es ändern könnte?

Ein uneingeschränkter Zugang würde viel Chaos verursachen. Wenn ein Ferkel Tier verwendet , um seine Parameter zu definieren, hat das Tier Ferkelattribute . Angenommen, eine Ziege verwendet ein Tier , um ihre Parameter zu definieren.

In JavaScript / TypeScript würde das so aussehen:

 var animal = {name: "piglet", legs: 4, color: "pink", decoration: "snout"}
 animal.name = "goat"
 animal.decoration = "horns"

Das nächste, was Sie wissen, sind rosa Ziegen und Ferkel mit Hörnern. Zeigen Sie den Code in Aktion in der TypeScript-Sandbox an und klicken Sie auf Ausführen , um die Konsolenausgabe anzuzeigen.

Wenn Sie neben der Schaffung eines Streichelzoos das Programmieren lernen und sich inspirieren lassen möchten, finden Sie hier 10 weitere Projekte, die Sie inspirieren .

Weil Ihre Codebasis so groß ist, kann es Hunderte von Stunden dauern, bis Sie den Code gefunden haben, der Ihren Lämmer-Lama-Hälsen und Ihren Entenküken Wolle gibt. Und sobald Sie den fehlerhaften Code gefunden haben, müssen Sie noch mehr Spaghetti-Code schreiben, um zu verhindern, dass sich die Objekte gegenseitig stören. Es muss einen besseren Weg geben.

Sie können das Überlappungsproblem beheben, indem Sie Objekte mit Klassen definieren. Jeder Teil des Codes kann ein Objekt basierend auf der Klassendefinition erstellen. Das Erstellen eines eindeutigen Objekts wird als Instanziierung bezeichnet. Es garantiert, dass jedes erstellte Objekt seine eigenen Eigenschaften hat. Und diese Objekte können sich nicht versehentlich gegenseitig stören.

Klassen sind nicht genug; Ihre Objektvariablen müssen ebenfalls gekapselt werden

Deshalb haben wir beschlossen, dass jedes Tier ein eigenes Objekt benötigt. Erstellen wir eine Klasse, die unsere Tiere definiert.

 class Animal {
 name: string;
 legs: number;
 color: string;
 decoration: string;
 constructor(name: string, legs: number, color: string, decoration: string) {
 this.name = name;
 this.legs = legs;
 this.color = color;
 this.decoration = decoration;
 }
 }

Als nächstes erstellen wir ein paar Tierobjekte.

 let babyDuck = new Animal("baby duck", 2, "yellow", "beak");
 let bunny = new Animal("bunny", 4, "gray", "floppy ears");

Spielen Sie bisher mit dem Code.

Jetzt können wir alle Tiere hinzufügen, die wir wollen, ohne seltsame Mutationen. Oder können wir?

Was würde passieren, wenn eines Nachts ein müder Programmierer Code schreiben würde, um ein Tier aus der Creepy-Crawly-App heraus zu bearbeiten, aber der Hase versehentlich bearbeitet wurde?

 bunny.color = "black";
 bunny.legs = 8;

Spinnenhasen sind nicht cool, Mann! Das ist genauso schlimm wie damals, als wir unseren Code nicht in Objekte eingekapselt haben. Stellen wir sicher, dass das nie wieder passiert.

Das erste, was wir tun müssen, ist, unsere Objekte privat zu machen. Das bedeutet, dass nichts unsere Variablen direkt nach dem Erstellen bearbeiten kann. Hier ist der Code, der zeigt, dass das Ändern privater Variablen einen Fehler verursacht .

Variablen müssen jedoch änderbar sein. Und hier kommen Getter und Setter ins Spiel.

Getter und Setter sind Funktionen, die kontrolliert auf Variablen zugreifen und diese ändern. Setter können Einschränkungen für die Daten festlegen, die geändert werden. Und Getter können die Daten ändern, die abgerufen werden.

So sieht unsere Klasse mit get- und set-Funktionen zur Steuerung der Beinzahl aus.

 class Animal {
 private _name: string;
 private _legs: number;
 private _color: string;
 private _decoration: string;
 constructor(name: string, legs: number, color: string, decoration: string) {
 this._name = name;
 this._legs = legs;
 this._color = color;
 this._decoration = decoration;
 }
 get legs() {
 return this._legs;
 }
 set legs(legCount: number) {
 if(legCount > 1 && legCount < 5) {
 this._legs = legCount;
 }
 }
 }

Lernen Sie die Kapselung und vermeiden Sie globale Variablen

Hier ist der endgültige Code. Fassen Sie zusammen, was Sie gelernt haben, um Ihr Verständnis zu gewährleisten:

• Fügen Sie Getter und Setter für den Rest der Variablen hinzu.
• Geben Sie den Tiernamen als span-Tag zurück: <span> lama </ span>
• Ändern Sie die Dekorationsvariable, um mehrere Dekorationen zuzulassen. Erstellen Sie einen geeigneten Getter und Setter, um diese Änderung widerzuspiegeln.

Wenn Sie Ihren Code wie eine gut geölte Maschine am Laufen halten möchten, müssen Sie unbedingt die Kapselung verwenden. Vermeiden Sie globale Variablen um jeden Preis. Wenn Sie Variablen für Objekte freigeben müssen , können Sie in der TypeScript-Dokumentation lesen, wie Sie Klassen- / statische Variablen erstellen, um zu erfahren, wie.