Erstellen Sie eine Klasse in JavaScript

1. Klassen in JavaScript
2. Erstellen Sie eine Klasse in JavaScript
3. Deklaration einer Methode in einer Klasse in JavaScript
4. Verwendung von get und set in Klassen in JavaScript

In JavaScript haben wir den grundlegenden Funktionsdeklarationsprozess, um bestimmte Aufgaben zu ermöglichen, aber Funktionen fahren nicht mit dem Konzept fort, ein Objekt zu erstellen. Eher wie eine Funktion ist ein unabhängiger Codeblock, um eine bestimmte Aufgabe auszuführen.

Klassen in JavaScript

Was macht die Klasse? Das Konzept der Klasse wurde über die ES6-Updates eingeführt, die einen durchsetzungsfähigen Ansatz zum Aufbau von etwas Wertvollem haben.

Angenommen, wir erstellen ein Spiel mit mehreren Charakteren. Die Figuren haben eine menschenähnliche Figur, zwei Augen, zwei Ohren, zwei Hände usw.

Das Definieren expliziter Funktionen für jedes Zeichen führt zu einem Durcheinander und Unbehagen bei Änderungen. Also erstellen wir eine Klasse, die die gemeinsamen Merkmale der Figuren enthält; Somit fungiert eine Klasse als Blaupause für ein Objekt.

Hier werden wir die grundlegende Initialisierung einer Klasse diskutieren und einige wichtige Funktionsweisen demonstrieren. Außerdem sind einige Punkte zu beachten: Die Klasse arbeitet in JavaScript im strikten Modus, also werden wir dies vor unseren Treibercodes initiieren.

Ein weiterer wichtiger Punkt ist, dass wir im Gegensatz zu Funktionen eine Klasse nicht aufrufen können, bevor sie deklariert wurde. In Funktionen und Methoden können wir zuerst die Methode aufrufen und später ihre Details beschreiben.

Aber in Klassen werden wir die Inhalte und Deklarationen immer beschreiben und dann explizit aufrufen müssen. Andernfalls werden wir mit einem referenceError konfrontiert.

Springen wir also zu den Codezeilen, um eine bessere Vorschau auf das Thema zu erhalten.

Erstellen Sie eine Klasse in JavaScript

Wir werden immer das Schlüsselwort class verwenden, um eine Klasse in JavaScript zu erstellen. Und danach wird der Name definiert, der die Klasse berechtigen wird.

In diesem Beispiel nehmen wir eine Klasse abc mit ihrer constructor-Methode mit dem value-Parameter. Das bedeutet, dass die Klasse immer diesen Konstruktor als Inhalt hat, auch wenn keine anderen Methoden oder Ausdrücke deklariert sind.

Konstruktoren sind wie der Standard- oder der Basisteil.

Später nach der Fertigstellung der Klasse und ihres Konstruktors werden wir eine Instanz oder ein Objekt für die Klasse initiieren. Und wenn wir das Objekt zusammen mit dem Konstruktorparameter aufrufen, ergibt sich der Wert, der die Eigenschaft der Klasse ist.

Und somit impliziert es, dass das unter der Klasse erstellte Objekt alle Eigenschaften dieser Klasse abc besitzt. Lassen Sie uns den Code überprüfen.

Code-Auszug:

'use strict';

class abc {
  constructor(value) {
    this.value = value;
  }
}

var x = new abc(5);
console.log(x.value)

Ausgang:

Deklaration einer Methode in einer Klasse in JavaScript

Im vorherigen Codebeispiel haben wir gesehen, wie der Konstruktor funktioniert. Abgesehen davon können wir auch private Eigenschaften und grundlegende Methoden initiieren.

Bei privaten Deklarationen können die Instanzen nicht darauf zugreifen. Auf Methoden, die ohne explizite Deklaration von private deklariert werden, kann jedoch von Instanzen zugegriffen und sie geändert werden.

Das folgende Beispiel unterstützt die obige Aussage.

Code-Auszug:

'use strict';

class abc {
  constructor(value) {
    this.value = value
  }
  math() {
    return this.value + 5
  }
}
var x = new abc(5);
console.log(x.value);
console.log(x.math());

Ausgang:

Verwendung von get und set in Klassen in JavaScript

Die Schlüsselwörter get und set, die oft als Getter und Setter bezeichnet werden, werden verwendet, um Funktionen expliziter zu definieren. Hier stellt der Setter-Teil den Wert ein oder führt eine beliebige Berechnung basierend auf der Anforderung durch.

Später gibt der Getter den Wert an die Klasse zurück. Dieser Prozess macht die Aufgabe flexibler.

Lassen Sie uns dieses Konzept anhand eines Beispiels visualisieren.

Code-Auszug:

'use strict';

class abc {
  constructor(val) {
    this.val = val
  }

  get math() {
    return this.value
  }

  set math(y) {
    this.val = y + 10
  }
}

var x = new abc()
x.math = 32
console.log(x.val)

Ausgang: