Zusätzliche Funktionen von Klassen in JavaScript
In diesem Artikel erklären wir die zusätzlichen Funktionen von Klassen in JavaScript.
YouTube Video
Zusätzliche Funktionen von Klassen in JavaScript
Private Eigenschaften in JavaScript
In JavaScript sind private Eigenschaften solche, die nur innerhalb des Objekts oder der Klasse zugänglich sind. Dies ermöglicht ein sichereres und robusteres Code-Design durch Kapselung, sodass direkte Modifikationen oder Zugriffe von externem Code nicht möglich sind.
Mit ECMAScript 2020 (ES11) wurde im Jahr 2020 die Verwendung von # (Hash) eingeführt, um private Felder in einer Klasse zu definieren. Dies bietet eine klarere Methode und ersetzt traditionelle JavaScript-Konventionen für private Eigenschaften (wie z.B. Variablennamen, die mit einem Unterstrich beginnen).
Vorteile von privaten Eigenschaften
Die folgenden sind die Vorteile privater Eigenschaften.
- Kapselung: Verbirgt den internen Zustand vor der Außenwelt und bewahrt die Datenkonsistenz.
- Sicherheit: Verhindert, dass Eigenschaften unbeabsichtigt durch externen Code verändert werden können.
- Verbesserte Wartbarkeit: Verbirgt die Implementierung von Objekten oder Klassen und klärt die Schnittstelle, die nach außen sichtbar ist.
So verwenden Sie private Eigenschaften
Private Eigenschaften in Klassen definieren
Private Felder werden mit einem Namen definiert, der mit # beginnt. Dieses Feld kann nicht direkt aus Instanzen der Klasse oder deren Unterklassen aufgerufen werden.
1class Person {
2 // Define private property
3 #name;
4
5 constructor(name) {
6 this.#name = name;
7 }
8
9 // Method to access the private property
10 getName() {
11 return this.#name;
12 }
13
14 // Method to change the private property
15 setName(newName) {
16 this.#name = newName;
17 }
18}
19
20const john = new Person("John");
21console.log(john.getName()); // John
22
23// Cannot access private property directly
24console.log(john.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class
Im obigen Code ist #name eine private Eigenschaft, die von außerhalb der Person-Klasse nicht direkt aufgerufen werden kann. Sie können den Namen nur über die Methoden getName und setName aufrufen oder ändern.
Private Methoden definieren
Wie private Eigenschaften werden auch private Methoden mit einem Namen definiert, der mit # beginnt. Private Methoden können nur innerhalb der Klasse aufgerufen werden.
1class Counter {
2 #count = 0;
3
4 increment() {
5 this.#count++;
6 this.#logCount(); // Calling private method
7 }
8
9 // Private method
10 #logCount() {
11 console.log(`Current count: ${this.#count}`);
12 }
13}
14
15const counter = new Counter();
16counter.increment(); // Current count: 1
17
18// Cannot access private method directly
19counter.#logCount(); // SyntaxError: Private field '#logCount' must be declared in an enclosing class
Hier wird #logCount als private Methode definiert und kann von außerhalb der Klasse nicht aufgerufen werden. Diese Methode wird nur innerhalb der Klasse verwendet.
Vorteile und Überlegungen zu privaten Eigenschaften
Vorteil
- Da der Zugriff von außerhalb der Klasse nicht direkt möglich ist, werden unbeabsichtigte Änderungen oder Operationen verhindert.
- Da unsichtbare Teile von außerhalb gut verborgen bleiben können, können Sie die als API freigegebenen Teile klar verwalten.
Notizen
- Da private Felder von außerhalb der Klasse vollständig verborgen sind, können Testing und Debugging erschwert werden. Daher ist es wichtig, eine API bereitzustellen, die bereits in der Entwurfsphase umfassend getestet werden kann.
- Private Felder verhalten sich anders als andere Teile von JavaScript mit prototypbasierten Eigenschaften, da sie für jede Instanz einzigartig sind.
Traditionelle pseudonyme Implementierung privater Eigenschaften
Vor der Einführung privater Felder mit # hatte JavaScript keine offizielle Syntax für private Eigenschaften. In der Vergangenheit wurden pseudo-private Eigenschaften daher auf folgende Weise implementiert:.
Konvention der Verwendung von Unterstrichen
Entwickler kennzeichneten traditionell ‚privat‘, indem sie Variablennamen mit einem Unterstrich voranstellten.
1class Car {
2 constructor(brand) {
3 this._brand = brand; // Using an underscore to indicate private
4 }
5
6 getBrand() {
7 return this._brand;
8 }
9}
10
11const car = new Car("Toyota");
12console.log(car.getBrand()); // Toyota
13console.log(car._brand); // Toyota (Accessible from outside)
Diese Methode ist lediglich eine ‚Konvention‘, und in der Praxis können die Eigenschaften dennoch von außen zugegriffen werden.
Implementierung privater Eigenschaften mit Closures
Es ist auch möglich, private Eigenschaften mit Closures im Funktionsbereich zu erzielen.
1function createPerson(name) {
2 let _name = name; // Private variable within function scope
3
4 return {
5 getName: function() {
6 return _name;
7 },
8 setName: function(newName) {
9 _name = newName;
10 }
11 };
12}
13
14const person = createPerson("Alice");
15console.log(person.getName()); // Alice
16person.setName("Bob");
17console.log(person.getName()); // Bob
18
19// Cannot access directly from outside
20console.log(person._name); // undefined
Mit dieser Methode ist die Variable _name innerhalb des Funktionsbereichs eingeschlossen und kann von außen nicht direkt zugegriffen werden.
Zusammenfassung
Private Eigenschaften in JavaScript sind sehr effektiv in der Bereitstellung von Kapselung im Klassen- und Objekt-Design und helfen, Daten sicher zu schützen. Die in ES2020 eingeführte #-Notation für private Felder bietet eine klarere und sicherere Methode zur Verwaltung der Privatsphäre im Vergleich zu traditionellen Konventionen und Closures.
Optional Chaining in JavaScript
Optional Chaining ist eine sehr nützliche Syntax in JavaScript, um auf Eigenschaften tief verschachtelter Objekte zuzugreifen. Es verbessert die Code-Lesbarkeit und Wartbarkeit, indem es sicheren Zugriff ermöglicht, ohne die Existenz spezifischer Eigenschaften einzeln überprüfen zu müssen.
Grundsyntax von Optional Chaining
Optional Chaining kann verwendet werden, indem ein ? vor den Punkt (.) oder die Klammernotation für den Eigenschaftszugriff gesetzt wird. Diese Notation gibt undefined zurück, wenn eine durchlaufene Eigenschaft null oder undefined ist, und ermöglicht dem Programm, die Verarbeitung sicher fortzusetzen, ohne einen Fehler auszulösen.
Beispiel:
1const user = {
2 name: 'John',
3 address: {
4 street: '123 Main St',
5 city: 'New York'
6 }
7};
8
9// Without using optional chaining
10const city = user && user.address && user.address.city;
11console.log(city); // New York
12
13// Using optional chaining
14const cityWithOptionalChaining = user?.address?.city;
15console.log(cityWithOptionalChaining); // New York
In diesem Beispiel greifen wir auf die Eigenschaft address und deren city-Eigenschaft des Objekts user zu. Ohne die Verwendung der optionalen Verkettung müssten Sie mehrere Existenzprüfungen durchführen, aber mit der optionalen Verkettung können Sie sicher mit einer einzigen Anweisung auf die Eigenschaft zugreifen.
Verwendung der optionalen Verkettung mit Arrays und Funktionen
Optionale Verkettung ist nicht nur auf Objekteigenschaften anwendbar, sondern auch auf Array-Elemente und Funktionsaufrufe.
Beispiel mit Arrays:
1const users = [{ name: 'Alice' }, { name: 'Bob' }];
2
3// Accessing the non-existent third element
4const thirdUser = users[2]?.name;
5console.log(thirdUser); // undefined
Beispiel mit Funktionen:
1const user = {
2 greet: function() {
3 return 'Hello!';
4 }
5};
6
7// Call the function only if greet exists
8const greeting = user.greet?.();
9console.log(greeting); // Hello!
10
11// Return undefined if greet does not exist
12const nonExistentGreeting = user.nonExistentMethod?.();
13console.log(nonExistentGreeting); // undefined
Kombinieren der optionalen Verkettung mit Standardwerten
Bei der Verwendung der optionalen Verkettung ist es üblich, den logischen ODER-Operator (||) oder den Null-Koaleszenz-Operator (??) zu verwenden, um Standardwerte anzugeben, falls eine Eigenschaft nicht vorhanden ist.
Beispiel:
1const user = {
2 name: 'John',
3 address: {
4 city: 'New York'
5 }
6};
7
8// Set a default value for a non-existent property
9const state = user?.address?.state || 'Unknown';
10console.log(state); // Unknown
11
12// Example using the nullish coalescing operator
13const zipCode = user?.address?.zipCode ?? '00000';
14console.log(zipCode); // 00000
Der ||-Operator behandelt false, 0, '' usw. als falsy, während der ??-Operator den Standardwert nur verwendet, wenn der Operand null oder undefined ist.
Vorteile der optionalen Verkettung
- Sicherer Zugriff auf verschachtelte Objekte: Mithilfe der optionalen Verkettung müssen Sie keine expliziten Existenzprüfungen mehr durchführen, was den Code kompakter macht.
- Vermeidung von Fehlern: Es können Laufzeitfehler vermieden werden, selbst wenn eine Eigenschaft
nulloderundefinedist. - Verbesserte Lesbarkeit und Wartbarkeit: Besonders beim Umgang mit vielen verschachtelten Objekten wird die Lesbarkeit des Codes erheblich verbessert.
Vorsicht bei der Verwendung der optionalen Verkettung
- Die häufige Verwendung der optionalen Verkettung kann ein Hinweis darauf sein, dass das Design der Datenstruktur zu komplex ist. Sie sollten ein einfaches Datenmodell anstreben.
- Da einige ältere Browser und JavaScript-Engines dies nicht unterstützen, müssen Sie möglicherweise Polyfills oder Transpiler verwenden.
Fazit
Die optionale Verkettung ist eine leistungsstarke Funktion, die den sicheren Zugriff auf Eigenschaften und Funktionen verschachtelter Objekte in JavaScript vereinfacht. Sie ist besonders effektiv beim Zugriff auf tief verschachtelte Datenstrukturen und trägt zur Fehlervermeidung sowie zur Verbesserung der Code-Lesbarkeit bei.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.