JavaScript - Encapsulation

Hallo da, aufstrebende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt der JavaScript-Verkapselung. Keine Sorge, wenn du neu im Programmieren bist – ich werde dein freundlicher Guide sein, und wir werden dieses Konzept gemeinsam Schritt für Schritt erkunden. Also packt eure virtuellen Rucksäcke, und los geht's!

Was ist Verkapselung?

Stell dir vor, du hast einen Schatzkasten. Du willst nicht, dass jeder ihn öffnet und deine kostbaren Steine nimmt, oder? Genau das macht die Verkapselung im Programmieren. Es ist so, als ob du deinen Code in eine schützende Blase packst, die nur bestimmten Teilen von außen zugänglich ist.

In einfacheren Worten, Verkapselung ist das Zusammenfassen von Daten und den Methoden, die auf diese Daten operieren, in einer Einheit oder einem Objekt. Es ist eine Möglichkeit, die internen Details siitä zu verbergen, wie ein Objekt funktioniert, und nur das Nötige nach außen zu präsentieren.

Warum brauchen wir Verkapselung?

Du fragst dich vielleicht, "Warum brauchen wir dieses aufwendige Verkapselungsding?" Lass mich dir eine kleine Geschichte erzählen.

Es war einmal, in einem Land des Spaghetticodes, lebte ein Programmierer namens Bob. Bobs Code war für jeden zugänglich, und bald begannen andere Programmierer, ihn zu verändern. Chaos brach aus! Niemand wusste mehr, was welcher Teil des Codes macht, und Bugs vermehrten sich wie Kaninchen.

Genau hier kommt die Verkapselung zur Rettung. Sie hilft uns:

Unsere Daten vor versehentlichen Änderungen zu schützen
Komplexe Implementierungsdetails zu verbergen
Den Code organisierter und einfacher zu warten zu machen
Abhängigkeiten zwischen verschiedenen Teilen unseres Codes zu reduzieren

Verschiedene Wege zur Verkapselung in JavaScript

In JavaScript haben wir mehrere Tricks, um Verkapselung zu erreichen. Lassen Sie uns diese einzeln erkunden:

Verkapselung mit Funktionsschließungen erreichen

Schließungen sind wie magische Blasen in JavaScript, die sich an die Umgebung erinnern, in der sie erstellt wurden. Wir können sie verwenden, um private Variablen und Methoden zu erstellen. Sehen wir uns ein Beispiel an:

function createBankAccount(initialBalance) {
let balance = initialBalance;

return {
deposit: function(amount) {
balance += amount;
console.log(`Eingezahlt ${amount}. Neues Guthaben ist ${balance}`);
},
withdraw: function(amount) {
if (amount <= balance) {
balance -= amount;
console.log(`Abgehoben ${amount}. Neues Guthaben ist ${balance}`);
} else {
console.log("Unzureichende Mittel!");
}
},
getBalance: function() {
return balance;
}
};
}

const myAccount = createBankAccount(1000);
myAccount.deposit(500);  // Eingezahlt 500. Neues Guthaben ist 1500
myAccount.withdraw(200); // Abgehoben 200. Neues Guthaben ist 1300
console.log(myAccount.getBalance()); // 1300
console.log(myAccount.balance); // undefined

In diesem Beispiel ist balance unsere private Variable. Sie ist nicht direkt von außerhalb der createBankAccount-Funktion zugänglich. Wir können nur über die Methoden interagieren, die wir暴露:deposit, withdraw und getBalance. Dies ist die Verkapselung in Aktion!

Verkapselung mit ES6-Klassen und privaten Variablen erreichen

Mit der Einführung von ES6-Klassen haben wir eine vertrautere Methode zum Erstellen von Objekten und zur Erreichung der Verkapselung bekommen. Hier ist, wie wir es machen können:

class BankAccount {
#balance;  // Private Variable

constructor(initialBalance) {
this.#balance = initialBalance;
}

deposit(amount) {
this.#balance += amount;
console.log(`Eingezahlt ${amount}. Neues Guthaben ist ${this.#balance}`);
}

withdraw(amount) {
if (amount <= this.#balance) {
this.#balance -= amount;
console.log(`Abgehoben ${amount}. Neues Guthaben ist ${this.#balance}`);
} else {
console.log("Unzureichende Mittel!");
}
}

getBalance() {
return this.#balance;
}
}

const myAccount = new BankAccount(1000);
myAccount.deposit(500);  // Eingezahlt 500. Neues Guthaben ist 1500
myAccount.withdraw(200); // Abgehoben 200. Neues Guthaben ist 1300
console.log(myAccount.getBalance()); // 1300
console.log(myAccount.#balance); // SyntaxError: Private Variable '#balance' muss in einer umgebenden Klasse deklariert werden

In diesem Beispiel verwenden wir das #-Symbol, um balance als private Variable zu deklarieren. Das bedeutet, dass sie nur innerhalb der BankAccount-Klasse zugänglich ist, nicht von außerhalb.

Verkapselung mit Getter und Setter erreichen

Getter und Setter sind spezielle Methoden, die es uns ermöglichen, zu definieren, wie eine Eigenschaft zugreifbar oder verändert wird. Sie sind wie Security Guards für die Eigenschaften unseres Objekts. Sehen wir uns sie in Aktion an:

class Circle {
constructor(radius) {
this._radius = radius;
}

get radius() {
return this._radius;
}

set radius(value) {
if (value <= 0) {
throw new Error("Radius muss positiv sein");
}
this._radius = value;
}

get area() {
return Math.PI * this._radius ** 2;
}
}

const myCircle = new Circle(5);
console.log(myCircle.radius); // 5
console.log(myCircle.area);   // 78.53981633974483

myCircle.radius = 10;
console.log(myCircle.radius); // 10

myCircle.radius = -1; // Error: Radius muss positiv sein

In diesem Beispiel verwenden wir einen Getter, um den radius zu lesen, und einen Setter, um ihn zu modify. Der Setter enthält eine Überprüfung, um sicherzustellen, dass der Radius stets positiv ist. Wir haben auch einen Getter für area, der den Flächeninhalt berechnet.

Vorteile der Verkapselung in JavaScript

Nun, da wir gesehen haben, wie man Verkapselung erreicht, lassen Sie uns ihre Vorteile zusammenfassen:

Daten protection: Es verhindert den unbefugten Zugriff auf die Interna unserer Objekte.
Flexibilität: Wir können die interne Implementierung ändern, ohne den externen Code, der unser Objekt verwendet, zu beeinflussen.
Modularität: Es hilft dabei, selbst-contained Code-Einheiten zu erstellen, was unseren Code modularer und einfacher zu verwalten macht.
Debugging: Durch die Beschränkung darauf, wo Daten geändert werden können, ist es einfacher, Bugs zu verfolgen.
Abstraktion: Es ermöglicht uns, komplexe Implementierungsdetails zu verbergen und eine einfache Schnittstelle für die Verwendung unserer Objekte bereitzustellen.

Methoden-Tabelle

Hier ist eine praktische Tabelle, die die Methoden zusammenfasst, die wir besprochen haben, um Verkapselung zu erreichen:

Methode	Beschreibung	Beispiel
Funktionsschließungen	Verwendet Schließungen, um private Variablen zu erstellen	`function createObject() { let privateVar = 0; return { getVar: () => privateVar }; }`
ES6 Klassen mit privaten Feldern	Verwendet `#`, um private Felder in einer Klasse zu deklarieren	`class MyClass { #privateField; constructor() { this.#privateField = 0; } }`
Getter und Setter	Verwendet spezielle Methoden, um den Zugriff auf Eigenschaften zu steuern	`class MyClass { get prop() { return this._prop; } set prop(value) { this._prop = value; } }`

Und das war's, Leute! Wir sind durch das Land der Verkapselung gereist, von ihrem grundlegenden Konzept bis hin zu den verschiedenen Möglichkeiten ihrer Implementierung in JavaScript. Denkt daran, dass Verkapselung wie ein guter Geheimnisträger ist – es weiß, was es teilen und was es geheim halten soll. Wenn ihr eure Programmierabenteuer fortsetzt, werdet ihr die Verkapselung als einen treuen Begleiter für die Erstellung robuster und wartbarer Code finden.

Weiter üben, neugierig bleiben und viel Spaß beim Programmieren!

Credits: Image by storyset

Vorheriges Tutorial:

JavaScript - ES5-Objektmethode

Nächstes Tutorial:

JavaScript - Vererbung