class
Définit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
Exemple
#class Student {
constructor(name) {
this.name = name
this.points = 0
}
addPoints(amount) {
this.points += amount
return this
}
}
const léa = new Student('Léa')
léa.addPoints(50).addPoints(30)
console.log(léa)
console.log(léa instanceof Student)Définition et utilisation
#Le mot class crée un modèle d’objets. La méthode constructor s’exécute à chaque new et définit les champs de la nouvelle instance via this. Les méthodes écrites dans le corps de la classe vont dans le prototype, donc toutes les instances utilisent les mêmes fonctions.
Une classe peut hériter d’une autre grâce à extends. Dans le constructeur de la classe dérivée, il faut appeler super() avant la première utilisation de this, et super.method() appelle la version de la méthode de la classe de base. Les champs et méthodes marqués static appartiennent à la classe elle-même, pas à l’instance.
Les champs préfixés par # sont privés, et on ne peut y accéder que depuis l’intérieur de la classe. Les accesseurs et mutateurs (get, set) exposent des valeurs calculées comme des propriétés ordinaires. Le corps d’une classe fonctionne toujours en mode strict, et contrairement aux déclarations de fonction, on ne peut pas utiliser une classe avant la ligne où elle est déclarée.
Syntaxe
#class Name {
field = value
#privateField = value
static staticField = value
constructor(param) {
this.property = param
}
method() {}
get computed() {}
set computed(value) {}
static staticMethod() {}
}
class Child extends Name {}Plus d’exemples
#class User {
constructor(name) {
this.name = name
}
describe() {
return `Utilisateur ${this.name}`
}
}
class Mentor extends User {
constructor(name, course) {
super(name)
this.course = course
}
describe() {
return `${super.describe()}, mentor du cours ${this.course}`
}
}
const mentor = new Mentor('Lucas', 'React')
console.log(mentor.describe())
console.log(mentor)class Wallet {
#coins = 0
static withBonus(bonus) {
const wallet = new Wallet()
wallet.add(bonus)
return wallet
}
add(amount) {
if (amount <= 0) throw new RangeError('Le montant doit être positif')
this.#coins += amount
}
get balance() {
return `${this.#coins} pièces`
}
}
const wallet = Wallet.withBonus(100)
wallet.add(25)
console.log(wallet.balance)
console.log(wallet)
console.log(Object.keys(wallet))Le champ #coins n’est visible ni de l’extérieur ni dans Object.keys(). Lire wallet.#coins hors de la classe est une erreur de syntaxe.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’oubliez pas
new. Appeler une classe comme une fonction ordinaire, par ex.Student("Léa"), lève uneTypeError. - Une méthode passée comme callback perd son
this, par ex. dansbutton.addEventListener("click", game.start). Utilisez une flèche() => game.start()ougame.start.bind(game). - Tout le code n’a pas besoin de classes. Pour des données simples, un littéral d’objet suffit, et pour une seule opération, une fonction ordinaire.
Entrées associées
#- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- thisMot-clé qui désigne l’objet sur lequel une fonction a été appelée.
- get / setPropriétés calculées à la lecture (get) et gérées à l’écriture (set).
- Object.create()Crée un nouvel objet avec le prototype donné.
- throwLève une exception : interrompt le code en cours et transmet l’erreur au bloc catch le plus proche.
- extendsCrée une classe dérivée qui hérite des méthodes d’une autre classe et peut les étendre ou les redéfinir.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.