Wie können wir Klassenvariablen in ES6 ohne native Unterstützung definieren?

ES6-Klassenvariablenalternativen

In ES5 wurden Klassenvariablen üblicherweise mithilfe des FrameWork.Class()-Musters definiert. Allerdings unterstützen Klassendeklarationen in ES6 nativ keine Klassenvariablen.

Warum die Auslassung?

Das Fehlen von Klassenvariablen in ES6 war beabsichtigt. TC39 zielte darauf ab, die Klassendeklaration von der Memberdefinition zu trennen. Klassendefinitionen sollten die Fähigkeiten der Klasse definieren, während Mitglieder (sowohl Variablen als auch Methoden) an anderer Stelle definiert werden sollten.

Konstruktor-Alternative

Eine Möglichkeit zum Definieren von Klassenvariablen besteht darin, sie innerhalb des Konstruktors zuzuweisen:

constructor() {
    this.MY_VAR = true;
}

Dies kann jedoch den Konstruktor überladen, insbesondere bei vielen Klassenparametern.

ES7 Vorschlag

Eine vorgeschlagene ES7-Funktion, „Property Initializers“, bietet eine prägnantere Syntax zum Definieren von Instanzvariablen in Klassendeklarationen und -ausdrücken:

class MyClass {
    foo = bar;
}

Class Config Handler

Ein alternativer Ansatz besteht darin, einen Klassenkonfigurationshandler zu erstellen, der der Klasse während der Initialisierung Variablen hinzufügt. Verwenden Sie beispielsweise eine 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
});

Babel- und TypeScript-Unterstützung

Babel und TypeScript bieten beide Syntax zum Definieren von Klassenvariablen:

// Babel
class MyClass {
    varName = value;
}

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

Das obige ist der detaillierte Inhalt vonWie können wir Klassenvariablen in ES6 ohne native Unterstützung definieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!