ES6 Klassenvariablen-Alternativen

Question

Aktuell verwenden viele von uns in ES5 das folgende Muster in Frameworks, um Klassen und Klassenvariablen zu erstellen, was bequem ist:

// ES 5
FrameWork.Class({

    variable: 'string',
    variable2: true,

    init: function(){

    },

    addItem: function(){

    }

});

In ES6 können Klassen nativ erstellt werden, es gibt jedoch keine Option für Klassenvariablen:

// ES6
class MyClass {
    const MY_CONST = 'string'; // <-- dies ist in ES6 nicht möglich
    constructor(){
        this.MY_CONST;
    }
}

Leider funktioniert das oben genannte nicht, da Klassen nur Methoden enthalten können.

Ich verstehe, dass ich this.myVar = true im constructor verwenden kann ... aber ich möchte meinen Konstruktor nicht 'verunreinigen', besonders wenn ich 20-30+ Parameter für eine größere Klasse habe.

Ich habe über viele Möglichkeiten nachgedacht, dieses Problem zu lösen, aber noch keine guten gefunden. (Zum Beispiel: Erstellen eines ClassConfig-Handlers und Übergeben eines parameter-Objekts, das separat von der Klasse deklariert wird. Dann würde der Handler an die Klasse angehängt werden. Ich habe auch über die Integration von WeakMaps nachgedacht.)

Welche Ideen hätten Sie, um mit dieser Situation umzugehen?

Answer 1

Definieren Sie einfach einen Getter.

class MyClass
{
  get MY_CONST () { return 'string'; }

  constructor ()
  {
    console.log ("MyClass MY_CONST:", this.MY_CONST);
  }
}

var obj = new MyClass();

Answer 2

Wenn nur das Durcheinander das Problem im Konstruktor verursacht, warum implementieren Sie dann nicht eine initialize-Methode, die die Variablen initialisiert? Dies ist eine normale Vorgehensweise, wenn der Konstruktor mit unnötigen Dingen überfüllt wird. Auch in typisierten Programmiersprachen wie C# ist es üblich, eine Initialize-Methode hinzuzufügen, um das zu handhaben.

Answer 3

Trotzdem kann man keine Klassen wie in anderen Programmiersprachen deklarieren. Aber man kann so viele Klassenvariablen erstellen. Das Problem ist jedoch der Gültigkeitsbereich des Klassenobjekts. Daher meiner Meinung nach der beste Weg zur OOP-Programmierung in ES6 Javascript:-

class foo{
   constructor(){
     //deklariere alle deine Variablen
     this.MY_CONST = 3.14;
     this.x = 5;
     this.y = 7;
     // oder rufe eine weitere Methode auf, um mehr Variablen außerhalb des Konstruktors zu deklarieren.
     // erstelle nun eine Objektreferenz auf Methodenebene und eine Eigenschaft auf öffentlicher Ebene
     this.MySelf = this;
     // du kannst auch den var Modifikator statt der Eigenschaft verwenden, aber das funktioniert nicht gut
     let self = this.MySelf;
     //code ......... 
   }
   set MySelf(v){
      this.mySelf = v;
   }
   get MySelf(v){
      return this.mySelf;
   }
   myMethod(cd){
      // verwende nun in jeder Methode der Klasse eine Objektreferenz darauf
      let self = this.MySelf;
      // verwende self nun als Objektreferenz im Code
   }
}

Answer 4

Neuere Browser ab 2021 (nicht IE, siehe MDN Browser-Diagramm) implementieren öffentliche Klassenfelder, die anscheinend das sind, wonach Sie suchen:

class MyClass {
  static foo = 3;
}

console.log(MyClass.foo);

Es scheint jedoch nicht möglich zu sein, dies zu einem const zu machen: Deklarieren von statischen Konstanten in ES6-Klassen?

Ein statischer Getter sieht ziemlich ähnlich aus:

class MyClass {
  static get CONST() {
    return 3;
  }
}

MyClass.CONST = 4; // Eigenschaft unberührt
console.log(MyClass.CONST);

Answer 5

Nun, du kannst Variablen im Konstruktor deklarieren.

class Foo {
    constructor() {
        var name = "foo"
        this.method = function() {
            return name
        }
    }
}

var foo = new Foo()

foo.method()