JavaScript Getter en Setter (met voorbeelden)

In deze tutorial leer je met behulp van voorbeelden over JavaScript-getter- en setter-methoden.

In JavaScript zijn er twee soorten objecteigenschappen:

  • Gegevenseigenschappen
  • Accessor-eigenschappen

Data-eigenschap

Hier is een voorbeeld van een gegevenseigenschap die we in de vorige tutorials hebben gebruikt.

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

Accessor-eigendom

In JavaScript zijn accessor-eigenschappen methoden die de waarde van een object ophalen of instellen. Daarvoor gebruiken we deze twee sleutelwoorden:

  • get - om een ​​getter-methode te definiëren om de eigenschapswaarde te krijgen
  • set - om een ​​setter-methode te definiëren om de eigenschapswaarde in te stellen

JavaScript Getter

In JavaScript worden getter-methoden gebruikt om toegang te krijgen tot de eigenschappen van een object. Bijvoorbeeld,

 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

In het bovenstaande programma wordt een getter-methode getName()gemaakt om toegang te krijgen tot de eigenschap van een object.

 get getName() ( return this.firstName; )

Opmerking: om een ​​getter-methode te maken, wordt het gettrefwoord gebruikt.

En ook bij het opvragen van de waarde, hebben we toegang tot de waarde als eigenschap.

 student.getName;

Wanneer u probeert toegang te krijgen tot de waarde als een methode, treedt er een fout op.

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

JavaScript-setter

In JavaScript worden setter-methoden gebruikt om de waarden van een object te wijzigen. Bijvoorbeeld,

 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

In het bovenstaande voorbeeld wordt de setter-methode gebruikt om de waarde van een object te wijzigen.

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

Opmerking: om een ​​setter-methode te maken, wordt het settrefwoord gebruikt.

Zoals getoond in het programma, de waarde firstNameis Monica.

Vervolgens wordt de waarde gewijzigd in Sarah.

 student.chageName = 'Sarah';

Opmerking : Setter moet precies één formele parameter hebben.

JavaScript Object.defineProperty ()

In JavaScript kunt u ook de Object.defineProperty()methode gebruiken om getters en setters toe te voegen. Bijvoorbeeld,

 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

In het bovenstaande voorbeeld Object.defineProperty()wordt gebruikt om toegang te krijgen tot en de eigenschap van een object te wijzigen.

De syntaxis voor gebruik Object.defineProperty()is:

 Object.defineProperty(obj, prop, descriptor)

De Object.defineProperty()methode heeft drie argumenten.

  • Het eerste argument is de objectnaam.
  • Het tweede argument is de naam van de eigenschap.
  • Het derde argument is een object dat de eigenschap beschrijft.

Interessante artikelen...