Kurse

ES6 führte das Konzept der „Klassen“ in JavaScript ein, das sich von Klassen in anderen Programmiersprachen unterscheidet. Hier sind Klassen spezielle Funktionen, die als Vorlagen zum Erstellen von Objekten dienen, die bereits Daten, mit diesen Daten verknüpfte Attribute und Methoden zur Manipulation dieser Daten enthalten. Diese Objekte, Properties und Methoden werden zusammen als „Mitglieder“ der Klasse bezeichnet.

Um eine Klasse zu definieren, verwenden Sie das Schlüsselwort class. Gemäß den Best Practices und der von den integrierten Konstruktorfunktionen von JavaScript festgelegten Konvention sollte jede Kennung einer Klasse mit einem Großbuchstaben beginnen:

class MyClass {}

Klassen sollen die Arbeit mit erweiterten Funktionen von Prototypen und Konstruktorfunktionen barrierefreier gestalten:

class MyClass {}

typeof MyClass;
> "function"

Da Klassen zum Teil hinzugefügt wurden, um die Arbeit mit erweiterten JavaScript-Funktionen einfacher und ansprechender zu gestalten, werden sie manchmal als "syntaktischer Zucker" bezeichnet. Klassen bieten jedoch mehr als nur eine nützliche Abkürzung für die prototypische Übernahme. Durch die Einführung der Klassensyntax konnten langjährige Designprobleme in JavaScript behoben werden, ohne dass Abwärtskompatibilitätsprobleme entstehen. Beispielsweise wird der gesamte Code im Text einer Klasse immer im strengen Modus ausgewertet.

Verwenden Sie den Operator new, um eine Instanz einer Klasse zu erstellen.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

Funktionen, die im Textkörper einer Klasse definiert sind, werden als Methoden jeder Instanz dieser Klasse bereitgestellt.

class MyClass {
    classMethod() {
        console.log( "My class method." );
    }
}

const myClassInstance = new MyClass();

myClassInstance.classMethod();
> "My class method."

Eine in einer Klasse definierte Methode wird zu einer Methode im Prototyp der resultierenden Instanz. Aufgrund der Beschaffenheit der Prototypkette können diese Methoden direkt für das resultierende Objekt aufgerufen werden:

class MyClass {
  classMethod() {
    console.log( "My class method." );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { }
    <prototype>: Object { … }
        classMethod: function classMethod()
        constructor: class MyClass { constructor(myPassedValue) }
        <prototype>: Object { … }

myClassInstance.classMethod();
> "My class method."

Wenn Sie eine Instanz einer Klasse erstellen, wird eine spezielle constructor()-Methode aufgerufen, die das erforderliche „Einrichten“ der neu erstellten Instanz ausführt und alle ihr zugeordneten Attribute initialisiert. Alle Argumente, die beim Erstellen der Instanz an die Klasse übergeben werden, sind für die Methode constructor() verfügbar:

class MyClass {
  constructor( myPassedValue ) {
    console.log( myPassedValue );
  }
}

const myClassInstance = new MyClass( "A string." );
> "A string."

Im Text einer Klasse bezieht sich der Wert von this auf die Instanz selbst. Alle in this definierten Attribute werden als Attribute jeder Instanz dieser Klasse angezeigt:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProperty = myPassedValue;
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { instanceProperty: "A string." }

Diese Attribute sind auch für alle Methoden innerhalb des Hauptteils der Klasse verfügbar:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  myMethod() {
    console.log( this.instanceProp );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance.myMethod();
> "A string."

Wenn Sie für Ihre Klasse keinen constructor() definieren, geht die JavaScript-Engine von einem leeren „Standard“-constructor aus. Jede Klasse kann nur eine spezielle Methode mit dem Namen constructor() haben:

class MyClass {
  constructor() {}
  constructor() {}
}
> Uncaught SyntaxError: A class may only have one constructor

Sie können eine Klasse mithilfe einer Klassendeklaration oder eines Klassenausdrucks definieren. Bei allen vorherigen Beispielen handelte es sich um Klassendeklarationen, für die Namen mit new aufgerufen werden müssen. Klassenausdrücke können benannt oder unbenannt bleiben, um eine "anonyme" Klasse zu erstellen.

let ClassExpression = class {
    constructor() {}
};

ClassExpression;
> class  {}

Anonyme Klassenausdrücke können Sie unter anderem bei Funktionen verwenden, die Klassen spontan erstellen:

function classMaker() {
  return class {
    constructor() {}
  };
}

let MyVariable = classMaker();

MyVariable;
> class  {}

Das nochmalige Deklaration einer Klasse mithilfe einer Klassendeklaration führt zu einem Syntaxfehler:

class MyClass {
    constructor( ) {
        console.log( "My class." );
    }
};

class MyClass {
    constructor() {
        console.log( "My new class." );
    }
};
> Uncaught SyntaxError: redeclaration of class MyClass

Mit Klassenausdrücken können Sie jedoch eine Klasse neu definieren:

let ClassExpression = class MyClass { };

ClassExpression = class MyOtherClass {
    constructor( myString ) {
        this.myProp = myString;
    }
};

new ClassExpression( "String." );
> MyOtherClass {myProp: 'String.'}

Sie können einen benannten Klassenausdruck nicht mit einem Namen wie eine Klassendeklaration aufrufen. Der zugewiesene Name eines Klassenausdrucks ist jedoch als Attribut der erstellten Instanz verfügbar, hauptsächlich um die Fehlerbehebung zu vereinfachen:

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

Wenn Sie eine Variable mit einem Klassenausdruck initialisieren, werden wie erwartet die Windregeln dieser Variablen befolgt. Klassendeklarationen folgen denselben Regeln für eine vorübergehende Totzone wie let und const. Sie verhalten sich so, als wären sie nicht bis zum Anfang ihres aktuellen Bereichs gezogen worden. Das bedeutet, dass das Aufrufen einer Klasse vor der Klassendeklaration einen Fehler verursacht:

{
    let myVar = new MyClass( "Property string." );

    class MyClass {
        myProp;

        constructor( myString ) {
            this.myProp = myString;
        }
    };
};
> Uncaught ReferenceError: Cannot access 'MyClass' before initialization

Wissen testen