Ultimative Anleitung für Getter und Setter in JavaScript

Getter und Setter sind Funktionen oder Methoden verwendet erhalten und einstellen die Werte von Variablen. Das Getter-Setter-Konzept ist in der Computerprogrammierung üblich: Fast alle höheren Programmiersprachen enthalten eine Reihe von Syntax, um Getter und Setter, einschließlich JavaScipt, zu implementieren.

In diesem Beitrag werden wir sehen, was Getter Setter sind und wie Erstellen und verwenden Sie sie in JavaScript.

Get-Setter und Kapselung

Die Idee von Getter und Setter wird immer erwähnt in Verbindung mit der Kapselung. Kapselung kann sein auf zwei Arten verstanden.

Erstens ist es die Einrichtung der Daten-Getter-Setter Trio, um auf diese Daten zuzugreifen und diese zu ändern. Diese Definition ist nützlich, wenn einige Vorgänge, z. B. die Validierung, erforderlich sind an den Daten durchgeführt Bevor Sie It-Getter und Setter speichern oder anzeigen, bieten Sie ihm das perfekte Zuhause.

Zweitens gibt es eine strengere Definition, nach der die Einkapselung vorgenommen wird Daten ausblenden, um es von anderen Code unzugänglich zu machen, außer durch die Getter und Setzer. Auf diese Weise enden wir nicht versehentlich Überschreiben wichtiger Daten mit einem anderen Code im Programm.

Erstellen Sie Getter und Setter

1. Mit Methoden

Da sind Getter und Setter im Grunde funktioniert das Abrufen / Ändern eines Wertes gibt es mehr als eine möglichkeit um sie zu erstellen und zu verwenden. Der erste Weg ist:

 var obj = foo: 'Dies ist der Wert von foo', getFoo: function () return this.foo; , setFoo: function (val) this.foo = val;  console.log (obj.getFoo ()); // "das ist der Wert von foo" obj.setFoo ('hello'); console.log (obj.getFoo ()); // "Hallo"

Das ist der einfachste Weg Getter und Setter erstellen. Es gibt eine Immobilie foo und es gibt zwei Methoden: getFoo und setFoo zu Zurückgeben und einen Wert zuweisen zu dieser Eigenschaft.

2. Mit Schlüsselwörtern

Mehr “offiziell” und eine robuste Art, Getter und Setter zu erstellen, ist die Verwendung von erhalten und einstellen Schlüsselwörter.

Zu einen Getter erstellen, Stelle das erhalten Stichwort vor einer Funktionsdeklaration, die als Getter-Methode dient, und verwenden Sie die einstellen Stichwort auf die gleiche Weise zu Setzer erstellen. Die Syntax lautet wie folgt:

 var obj = fooVal: 'Dies ist der Wert von foo', get foo () return this.fooVal; , setze foo (val) this.fooVal = val;  console.log (obj.foo); // "das ist der Wert von foo" obj.foo = 'hallo'; console.log (obj.foo); // "Hallo"

Beachten Sie, dass die Daten nur sein können unter einem Eigenschaftsnamen gespeichert (fooVal) das ist anders vom Namen der Getter-Setter-Methoden (foo) weil eine Eigenschaft den Getter-Setter hält Die Daten können nicht gespeichert werden auch.

Welcher Weg ist besser??

Wenn Sie Getter und Setter mit Schlüsselwörtern erstellen möchten, können Sie das verwenden Zuweisungsoperator zum Einstellen der Daten und das Punktoperator, um die Daten zu erhalten, auf die gleiche Weise, wie Sie auf den Wert einer regulären Eigenschaft zugreifen würden.

Wenn Sie jedoch die erste Codierungsmethode für Getter und Setter wählen, müssen Sie die Setter- und Getter-Methoden aufrufen unter Verwendung der Funktionsaufrufsyntax weil es sich um typische Funktionen handelt (nichts anderes als die, die mit der erstellt wurden erhalten und einstellen Schlüsselwörter).

Außerdem besteht die Möglichkeit, dass Sie versehentlich enden einen anderen Wert zuweisen zu den Eigenschaften, die diese Getter-Setter-Methoden enthielten, und verliere sie komplett! Etwas, um das Sie sich bei der späteren Methode nicht sorgen müssen.

Sie können also sehen, warum ich das gesagt habe Die zweite Technik ist robuster.

Prävention überschreiben

Wenn Sie aus irgendeinem Grund die erste Methode bevorzugen, legen Sie die Eigenschaften fest, die die Getter-Setter-Methoden enthalten schreibgeschützt indem Sie sie schaffen mit Object.defineProperties. Eigenschaften erstellt über Object.defineProperties, Object.defineProperty und Reflect.defineProperty automatisch konfigurieren zu beschreibbar: falsch was bedeutet schreibgeschützt:

 / * Überschreibschutz verhindern * / var obj = foo: 'Dies ist der Wert von foo'; Object.defineProperties (obj, 'getFoo': value: function () return this.foo;, 'setFoo': value: function (val) this.foo = val;); obj.getFoo = 66; // getFoo wird nicht überschrieben! console.log (obj.getFoo ()); // "das ist der Wert von foo"

Operationen in Getter und Setzern

Sobald Sie die Getter und Setter vorgestellt haben, können Sie fortfahren und Operationen an den Daten durchführen bevor Sie es ändern oder zurückgeben.

In dem folgenden Code befinden sich die Daten in der Getter-Funktion mit einer Zeichenfolge verkettet bevor sie zurückgegeben werden, und in der Setter-Funktion eine Validierung von ob der Wert eine Zahl ist oder nicht wird vor dem Update ausgeführt n.

 var obj = n: 67, get id () return 'Die ID lautet:' + this.n; , setze id (val) if (typeof val === 'number') this.n = val;  console.log (obj.id); // "Die ID ist: 67" obj.id = 893; console.log (obj.id); // "Die ID ist: 893" obj.id = 'hallo'; console.log (obj.id); // "Die ID ist: 893"

Schützen Sie Daten mit Getigtern und Setters

Bisher haben wir den Einsatz von Gettern und Setters im ersten Kontext der Kapselung behandelt. Fahren wir mit dem zweiten fort, d. H. Wie Daten außerhalb des Codes verstecken mit Hilfe von Getter und Setter.

Ungeschützte Daten

Das Einrichten von Gettern und Setters bedeutet nicht, dass die Daten nur über diese Methoden abgerufen und geändert werden können. Im folgenden Beispiel ist es direkt geändert ohne die Getter- und Setter-Methoden zu berühren:

 var obj = fooVal: 'Dies ist der Wert von foo', get foo () return this.fooVal; , setze foo (val) this.fooVal = val;  obj.fooVal = 'Hallo'; console.log (obj.foo); // "Hallo"

Wir haben den Setter aber nicht benutzt direkt geändert die Daten (fooVal). Die Daten haben wir anfangs eingestellt obj ist jetzt weg! Um dies zu verhindern (versehentlich), Sie brauche etwas Schutz für Ihre Daten. Sie können das durch hinzufügen den Umfang einschränken wo Ihre Daten verfügbar sind. Sie können das durch entweder tun Block Scoping oder Funktionsumfang.

1. Scoping blockieren

Ein Weg ist zu Verwenden Sie einen Blockbereich Innerhalb dessen werden die Daten mit der Lassen Stichwort welches begrenzt seinen Umfang zu diesem Block.

EIN Blockumfang kann erstellt werden, indem Sie Ihren Code eingeben in einem Paar geschweifte Klammern. Wenn Sie einen Blockbereich erstellen, stellen Sie sicher, dass Hinterlasse einen Kommentar darüber fordern, dass die Zahnspangen in Ruhe gelassen werden, damit niemand Entfernt die Zahnspange aus Versehen sind sie einige zusätzliche redundante Klammern im Code oder füge ein Label hinzu zum Blockumfang.

 / * BLOCK SCOPE, lass die Zahnspange in Ruhe! * / let fooVal = 'das ist der Wert von foo'; var obj = get foo () return fooVal; , setze foo (val) fooVal = val fooVal = 'Hallo'; // hat keinen Einfluss auf das fooVal im Block console.log (obj.foo); // "das ist der Wert von foo"

Ändern / Erstellen fooValaußerhalb des Blocks wird nicht beeinflussen das fooVal innerhalb der Getter gesetzt.

2. Funktionsumfang

Der üblichere Weg, um die Daten mit dem Scoping zu schützen, ist mit Halten Sie die Daten in einer Funktion und ein Objekt zurückgeben mit den Getter und Setzern aus dieser Funktion.

 function myobj () var fooVal = 'Dies ist der Wert von foo'; return get foo () return fooVal; , setze foo (val) fooVal = val fooVal = 'Hallo'; // hat keinen Einfluss auf unser ursprüngliches fooVal var obj = myobj (); console.log (obj.foo); // "das ist der Wert von foo"

Das Objekt (mit dem foo () Getter-Setter innerhalb von) zurückgegeben von der myobj () Funktion ist gespeichert in obj, und dann obj wird benutzt um ruf den Getter und Setter.

3. Datenschutz ohne Umfang

Es gibt auch eine andere Möglichkeit, Ihre Daten vor dem Überschreiben zu schützen ohne seinen Umfang einzuschränken. Die Logik dahinter sieht folgendermaßen aus: Wie können Sie Daten ändern, wenn Sie nicht wissen, was aufgerufen wird??

Wenn die Daten eine nicht so leicht reproduzierbarer Name der Variablen / Eigenschaften, Die Wahrscheinlichkeit, dass niemand (auch wir selbst) es überschreiben wird, indem diesem Variablen- / Eigenschaftennamen ein Wert zugewiesen wird.

 var obj = s89274934764: 'Dies ist der Wert von foo', get foo () return this.s89274934764; , setze foo (val) this.s89274934764 = val;  console.log (obj.foo); // "das ist der Wert von foo"

Sehen Sie, das ist eine Möglichkeit, die Dinge zu klären. Obwohl der Name, den ich gewählt habe, nicht wirklich gut ist, können Sie dies auch tun Verwenden Sie zufällige Werte oder Symbole Eigenschaftennamen erstellen, wie von Derick Bailey in diesem Blogbeitrag vorgeschlagen. Das Hauptziel ist zu halten Sie die Daten versteckt aus einem anderen Code und lassen Sie ein Getter-Setter-Paar darauf zugreifen / aktualisieren.

Wann sollten Sie Getter und Setter verwenden??

Jetzt kommt die große Frage: Beginnen Sie damit, Getter und Setter zuzuweisen an alle Ihre Daten jetzt?

Wenn du bist Daten verstecken, dann gibt es keine andere Wahl.

Wenn Ihre Daten jedoch von anderen Codes angesehen werden, müssen Sie dennoch Getter-Setter verwenden Nur um es mit Code zu bündeln das führt einige Operationen darauf durch? ich würde sagen Ja. Code summiert sich sehr bald. Erstellen von Mikroeinheiten einzelner Daten mit einem eigenen Getter-Setter gibt Ihnen eine gewisse Unabhängigkeit an den Daten zu arbeiten, ohne andere Teile des Codes zu beeinflussen.