Kurse

Mit ES6 wurde das Konzept der „Klassen“ eingeführt. in JavaScript, das sich von in anderen Programmiersprachen lernen. Klassen sind hier spezielle Funktionen, dienen als Vorlagen zum Erstellen von Objekten, die bereits Daten, Eigenschaften die mit diesen Daten in Verbindung stehen, und Methoden zur Manipulation dieser Daten. Diese Objekte, Eigenschaften und Methoden werden zusammenfassend als „Mitglieder“ bezeichnet. der .

Um eine Klasse zu definieren, verwenden Sie das Schlüsselwort class. Die Best Practices und die der integrierten Konstruktorfunktionen von JavaScript festlegen, Kennung einer Klasse mit einem Großbuchstaben:

class MyClass {}

Die Kurse sollen barrierefreie Möglichkeiten für die Arbeit mit fortgeschrittenen von Prototypen und Konstruktorfunktionen:

class MyClass {}

typeof MyClass;
> "function"

Weil zum Teil auch Kurse hinzugefügt wurden, um die Arbeit mit erweiterten JavaScript-Funktionen zu ermöglichen einfacher und ansprechender zu gestalten, "syntaktic sugar" (syntaktischer Zucker). Sie können jedoch Klassen sind nicht nur eine nützliche Abkürzung für die Arbeit mit prototypische Vererbung. Einführung der Kurssyntax – Möglichkeiten für etablierte Designentwicklung Probleme in JavaScript auftreten, ohne Abwärtskompatibilitätsprobleme zu verursachen. Als eine Beispiel: Der gesamte Code innerhalb einer Klasse wird immer in strengen Modus an.

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 jeweils als Methoden der einzelnen Instanz dieser Klasse.

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

const myClassInstance = new MyClass();

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

Eine innerhalb einer Klasse definierte Methode wird zu einer Methode im Prototyp des sich ergebenden Instanz. Aufgrund der Natur des Prototypkette können Sie einen Aufruf diese Methoden direkt für das resultierende -Objekt an:

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, alle erforderlichen „Einrichtungen“ für die neu erstellte Instanz und initialisiert alle damit verbundenen Eigenschaften. Alle Argumente, die an die Klasse übergeben werden, wenn der Instanz erstellt wird, sind für die Methode constructor() verfügbar:

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

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

Innerhalb einer Klasse bezieht sich der Wert von this auf die Instanz selbst, Dabei werden alle auf this definierten Attribute als Attribute jeder Instanz von bereitgestellt. dieser Klasse:

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

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

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

Diese Eigenschaften 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 kein constructor() für Ihre Klasse definieren, geht davon aus, dass „default“ leer ist constructor. Jeder Kurs kann nur einen besonderen Methode mit dem Namen constructor():

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

Sie können eine Klasse entweder mit einer Klassendeklaration oder mithilfe einer Klassenausdruck verwendet. Die vorherigen Beispiele waren Klassendeklarationen, bei denen Namen mit new aufgerufen werden müssen. Klassenausdrücke können benannt oder unbenannt gelassen, um einen "anonymen" .

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

ClassExpression;
> class  {}

Anonyme Klassenausdrücke können Sie z. B. für Funktionen verwenden, Klassen „on-the-fly“ erstellen:

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

let MyVariable = classMaker();

MyVariable;
> class  {}

Die erneute 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 Klassen 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 anhand des Namens aufrufen, so wie Sie es mit einer Klasse tun können. Erklärung. Der einem Klassenausdruck zugewiesene Name ist jedoch als der erstellten Instanz. Dies vereinfacht hauptsächlich die Fehlerbehebung:

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, Windenregeln von diese Variable wie erwartet ausgeführt. Klassendeklarationen folgen den denselben „Zeitüberschreitung Zone“ Regeln als let und const, und sich so verhalten, als wären sie nicht auf die Spitze ihres aktuellen Projektumfangs gezogen, Das bedeutet, dass beim Aufrufen einer Klasse vor der Klassendeklaration ein Fehler auftritt:

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

    class MyClass {
        myProp;

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

Wissen testen