Comment pouvons-nous définir des variables de classe dans ES6 sans support natif ?

Alternatives aux variables de classe ES6

Dans ES5, les variables de classe étaient généralement définies à l'aide du modèle FrameWork.Class(). Cependant, dans ES6, les déclarations de classe ne prennent pas en charge nativement les variables de classe.

Pourquoi cette omission ?

L'absence de variables de classe dans ES6 était intentionnelle. TC39 visait à séparer la déclaration de classe de la définition de membre. Les définitions de classe doivent définir les capacités de la classe, tandis que les membres (variables et méthodes) doivent être définis ailleurs.

Alternative au constructeur

Une option pour définir les variables de classe consiste à les attribuer dans le constructeur :

constructor() {
    this.MY_VAR = true;
}

Cependant, cela peut encombrer le constructeur, notamment avec de nombreux paramètres de classe.

ES7 Proposition

Une fonctionnalité proposée par ES7, "Property Initializers", fournit une syntaxe plus concise pour définir des variables d'instance dans les déclarations et expressions de classe :

class MyClass {
    foo = bar;
}

Class Config Handler

Une approche alternative consiste à créer un gestionnaire de configuration de classe qui attache des variables à la classe lors de l'initialisation. Par exemple, en utilisant un WeakMap :

const classConfig = new WeakMap();
class ConfiguredClass {
    constructor() {
        const config = classConfig.get(this.constructor);
        if (config) {
            for (const [key, value] of Object.entries(config)) {
                this[key] = value;
            }
        }
    }
}

class MyConfiguredClass extends ConfiguredClass {}
classConfig.set(MyConfiguredClass, {
    variable: 'string',
    variable2: true
});

Prise en charge de Babel et TypeScript

Babel et TypeScript fournissent tous deux une syntaxe pour définir les variables de classe :

// Babel
class MyClass {
    varName = value;
}

// TypeScript
class MyClass {
    varName: string = value;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!