Champs de classe publics et privés

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy — leçon 18 sur 56.

Dans les classes JavaScript, nous pouvons définir deux types de champs de classe : publics et privés.

Les champs publics sont accessibles depuis l'extérieur de la classe et peuvent être utilisés par n'importe qui.

Créez une classe avec des champs publics :

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

Créez une instance d'étudiant :

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

Accédez aux champs publics depuis l'extérieur de la classe :

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

Les champs privés sont désignés par le symbole # et ne peuvent être consultés qu'à l'intérieur de la classe :

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

Utilisation de champs privés :

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

// Accéder à un champ privé en utilisant une méthode
console.log(student.getGrade()); // Résultat : 87

// Mettre à jour un champ privé en utilisant une méthode
student.updateGrade(92);
console.log(student.getGrade()); // Résultat : 92

// Ceci provoquerait une erreur :
// console.log(student.#grade); // SyntaxError

Défi

Ajoutez deux champs dans la classe nommée UserAccount :
1. Un champ public username
2. Un champ privé #password
Ajoutez un constructeur qui prend les paramètres username et password

Aide-mémoire

Les classes JavaScript prennent en charge les champs publics et privés.

Les champs publics sont accessibles depuis l'extérieur de la classe :

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

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

Les champs privés utilisent le symbole # et ne peuvent être consultés qu'à l'intérieur de la classe :

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()); // Résultat : 87
student.updateGrade(92);
// student.#grade provoquerait une erreur de syntaxe (SyntaxError)

Essayez vous-même

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

// Code de test - ne pas modifier
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // Devrait afficher "alice"