Champs et méthodes de classe

Champs

Les champs de classe sont déclarés directement dans le corps d'une classe, et non explicitement ajoutés en tant que propriété de la valeur this. Cependant, le résultat est le même: une propriété définie sur les instances de cette classe.

class MyClass {
    myField;
}

const myClassInstance = new MyClass();

myClassInstance;
> MyClass { myField: undefined }

Vous pouvez initialiser un champ avec une valeur. Il s'agit souvent d'une valeur par défaut que la logique de la classe peut remplacer:

class MyClass {
    myResult = false;
    set setValue( myValue ) {
        this.myResult = myValue;
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> Object { myResult: false }

myClassInstance.setValue = true;

myClassInstance;\
> Object { myResult: true }

Les champs de classe sont fonctionnellement identiques aux propriétés associées à la classe à l'aide de this. Cela signifie qu'elles sont accessibles et modifiées depuis l'extérieur de la classe comme n'importe quelle autre propriété.

class MyClass {
    myField = true;
}

const myClassInstance = new MyClass();

myClassInstance.myField;
> true

myClassInstance.myField = false;

myClassInstance.myField;
> false;

Les champs constituent une base pour certaines des fonctionnalités les plus avancées des classes.

Champs et méthodes privés

Les champs et méthodes privés sont inaccessibles en dehors d'un cours. Une propriété privée est associée à une instance d'une classe, ce qui signifie que chaque instance contient son propre ensemble de champs et de méthodes privés, tels que définis dans la classe.

Pour rendre une propriété privée, ajoutez # au début de l'identifiant lorsque vous le déclarez:

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {}
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { #myPrivateField: true }
    #myPrivateField: true
    <prototype>: Object { … }
        constructor: class MyClass {}
        <prototype>: Object { … }

Un champ privé doit être déclaré dans le corps de la classe associée. Vous pourrez modifier sa valeur ultérieurement en tant que propriété de this, mais vous ne pourrez pas créer le champ avec this.

Les champs privés ne sont pas accessibles ailleurs dans un script. Cela empêche la modification des propriétés des données en dehors des méthodes getter et setter fournies pour interagir avec les valeurs qu'elles contiennent, ainsi que l'accès direct aux méthodes destinées uniquement à être utilisées dans la classe elle-même.

class MyClass {
    #myResult = false;
    set setValue( myValue ) {
        this.#myResult = myValue;
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { #myResult: false }

myClassInstance.#myResult = true;
> Uncaught SyntaxError: reference to undeclared private field or method #myResult

myClassInstance.setValue = true;

myClassInstance;\
> MyClass { #myResult: true }

Gardez toutefois à l'esprit que les consoles de développement des navigateurs sont généralement très permissives, bien que incohérentes, concernant l'autorisation d'accès à des champs privés à des fins de débogage:

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {
        console.log( "This is inside a private method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass {#myPrivateField: true}

myClassInstance.#myPrivateField;
> true

myClassInstance.#myPrivateMethod();
> "This is inside a private method."

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {
        console.log( "This is inside a private method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass {#myPrivateField: true}

myClassInstance.#myPrivateField;
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField

myClassInstance.#myPrivateMethod();
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateMethod

Les champs privés sont restreints au corps de la classe qui les contient, ce qui signifie que même les classes enfants ne peuvent pas accéder aux champs privés associés à une classe parente:

class MyClass {
    #myPrivateField = true;
}
class ChildClass extends MyClass {
    childMethod() {
        console.log( this.#myPrivateField );
    }
}
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField

Champs et méthodes statiques

Les champs et méthodes statiques sont membres d'une classe elle-même, et non membres des instances de cette classe. De ce fait, les champs statiques fournissent un point central pour les données qui ne sont pas uniques à chaque instance d'une classe, mais que ces instances peuvent avoir besoin de référencer, par exemple des informations de configuration partagées. Les méthodes statiques sont souvent des fonctions utilitaires permettant de travailler avec des instances d'une classe, par exemple pour comparer ou trier des instances par rapport à un champ qu'elles contiennent.

Pour définir des champs et des méthodes statiques dans le corps d'une classe, utilisez le mot clé static:

class MyClass {
    static myStaticField;
    static myStaticMethod() {}
}
const myClassInstance = new MyClass();

Vous pouvez également utiliser la notation par points pour créer une méthode statique:

class MyClass {
    constructor() {}
}
MyClass.myStaticMethod = function() {}

Vous ne pouvez pas accéder aux propriétés statiques à partir d'une instance de leur classe, mais elles sont disponibles sur le constructeur de classe:

class MyClass {
    static myStaticField = true;
    static myStaticMethod() {
        console.log( "A static method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance.myStaticField;
> undefined

myClassInstance.myStaticMethod();
> Uncaught TypeError: myClassInstance.myStaticMethod is not a function

MyClass.myStaticField;
> true

MyClass.myStaticMethod();
> "A static method."

Ils ne sont pas techniquement obligatoires, mais il est recommandé d'utiliser des méthodes statiques pour créer des utilitaires permettant de travailler avec les instances d'une classe. Il peut s'agir, par exemple, d'une méthode statique dédiée au tri des instances d'une classe ou d'une méthode de fabrique statique contenant toute configuration nécessaire pour créer une instance d'une classe, puis renvoyant l'instance de classe:

class User {
    constructor( name, email ) {
        this.name = name;
        this.email = email;
    }
    static fromObject( myObject ) {
        return new User( myObject.name, myObject.email ?? "Omitted" );
    }
}
const userObject = {
    "name" : "My Name",
    "email" : "my@email.address"
};
const secondUserObject = {
    "name" : "My Name"
};

const firstUser = User.fromObject( userObject );
const secondUser = User.fromObject( secondUserObject );

firstUser;
> Object { name: "My Name", email: "my@email.address" }

secondUser;
> Object { name: "My Name", email: "Omitted" }

Testez vos connaissances