Öffentliche & private Klassenfelder

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy — Lektion 18 von 56.

In JavaScript-Klassen können wir zwei Arten von Klassenfeldern definieren: public und private.

Öffentliche Felder sind von außerhalb der Klasse zugänglich und können von jedem verwendet werden.

Erstellen Sie eine Klasse mit öffentlichen Feldern:

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

Erstellen Sie eine Student-Instanz:

const student = new Student('Alice', 95);

Greifen Sie von außerhalb der Klasse auf öffentliche Felder zu:

console.log(student.name); // Ausgabe: "Alice"
student.grade = 98;
console.log(student.grade); // Ausgabe: 98

Private Felder werden mit dem Symbol # gekennzeichnet und können nur von innerhalb der Klasse aufgerufen werden:

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

Verwendung privater Felder:

const student = new Student('Bob', 87);
console.log(student.name); // Ausgabe: "Bob"

// Zugriff auf ein privates Feld über eine Methode
console.log(student.getGrade()); // Ausgabe: 87

// Aktualisieren eines privaten Feldes über eine Methode
student.updateGrade(92);
console.log(student.getGrade()); // Ausgabe: 92

// Dies würde einen Fehler verursachen:
// console.log(student.#grade); // SyntaxError

Aufgabe

Füge zwei Felder in die Klasse namens UserAccount ein:
1. Ein öffentliches Feld username
2. Ein privates Feld #password
Füge einen Konstruktor hinzu, der die Parameter username und password entgegennimmt

Spickzettel

JavaScript-Klassen unterstützen öffentliche (public) und private Felder.

Öffentliche Felder sind von außerhalb der Klasse zugänglich:

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

const student = new Student('Alice', 95);
console.log(student.name); // Output: "Alice"
student.grade = 98;

Private Felder verwenden das #-Symbol und können nur innerhalb der Klasse aufgerufen werden:

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

const student = new Student('Bob', 87);
console.log(student.getGrade()); // Output: 87
student.updateGrade(92);
// student.#grade würde einen SyntaxError verursachen

Probier es selbst

import { UserAccount } from './userAccount.js';

// Testcode - nicht ändern
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // Sollte "alice" ausgeben