JavaScript Getter und Setter (mit Beispielen)

In diesem Tutorial lernen Sie anhand von Beispielen die JavaScript-Getter- und Setter-Methoden kennen.

In JavaScript gibt es zwei Arten von Objekteigenschaften:

  • Dateneigenschaften
  • Accessor-Eigenschaften

Dateneigenschaft

Hier ist ein Beispiel für eine Dateneigenschaft, die wir in den vorherigen Tutorials verwendet haben.

 const student = ( // data property firstName: 'Monica'; );

Accessor-Eigenschaft

In JavaScript sind Accessor-Eigenschaften Methoden, mit denen der Wert eines Objekts abgerufen oder festgelegt wird. Dafür verwenden wir diese beiden Schlüsselwörter:

  • get - um eine Getter-Methode zu definieren, um den Eigenschaftswert abzurufen
  • set - um eine Setter-Methode zum Festlegen des Eigenschaftswerts zu definieren

JavaScript Getter

In JavaScript werden Getter-Methoden verwendet, um auf die Eigenschaften eines Objekts zuzugreifen. Beispielsweise,

 const student = ( // data property firstName: 'Monica', // accessor property(getter) get getName() ( return this.firstName; ) ); // accessing data property console.log(student.firstName); // Monica // accessing getter methods console.log(student.getName); // Monica // trying to access as a method console.log(student.getName()); // error

Im obigen Programm wird eine Getter-Methode getName()erstellt, um auf die Eigenschaft eines Objekts zuzugreifen.

 get getName() ( return this.firstName; )

Hinweis: Zum Erstellen einer Getter-Methode wird das getSchlüsselwort verwendet.

Und auch beim Zugriff auf den Wert greifen wir als Eigenschaft auf den Wert zu.

 student.getName;

Wenn Sie versuchen, als Methode auf den Wert zuzugreifen, tritt ein Fehler auf.

 console.log(student.getName()); // error

JavaScript Setter

In JavaScript werden Setter-Methoden verwendet, um die Werte eines Objekts zu ändern. Beispielsweise,

 const student = ( firstName: 'Monica', //accessor property(setter) set changeName(newName) ( this.firstName = newName; ) ); console.log(student.firstName); // Monica // change(set) object property using a setter student.changeName = 'Sarah'; console.log(student.firstName); // Sarah

Im obigen Beispiel wird die Setter-Methode verwendet, um den Wert eines Objekts zu ändern.

 set changeName(newName) ( this.firstName = newName; )

Hinweis: Zum Erstellen einer Setter-Methode wird das setSchlüsselwort verwendet.

Wie in dem obigen Programm gezeigt, der Wert firstNameist Monica.

Dann wird der Wert in geändert Sarah.

 student.chageName = 'Sarah';

Hinweis : Der Setter muss genau einen formalen Parameter haben.

JavaScript Object.defineProperty ()

In JavaScript können Sie auch Object.defineProperty()Methoden verwenden, um Getter und Setter hinzuzufügen. Beispielsweise,

 const student = ( firstName: 'Monica' ) // getting property Object.defineProperty(student, "getName", ( get : function () ( return this.firstName; ) )); // setting property Object.defineProperty(student, "changeName", ( set : function (value) ( this.firstName = value; ) )); console.log(student.firstName); // Monica // changing the property value student.changeName = 'Sarah'; console.log(student.firstName); // Sarah

Im obigen Beispiel Object.defineProperty()wird auf die Eigenschaft eines Objekts zugegriffen und diese geändert.

Die Syntax für die Verwendung Object.defineProperty()lautet:

 Object.defineProperty(obj, prop, descriptor)

Die Object.defineProperty()Methode akzeptiert drei Argumente.

  • Das erste Argument ist der Objektname.
  • Das zweite Argument ist der Name der Eigenschaft.
  • Das dritte Argument ist ein Objekt, das die Eigenschaft beschreibt.

Interessante Beiträge...