JavaScript Getter och Setter (med exempel)

I denna handledning lär du dig om JavaScript-getter- och settermetoder med hjälp av exempel.

I JavaScript finns det två typer av objektegenskaper:

  • Dataegenskaper
  • Tillbehörsegenskaper

Dataegenskap

Här är ett exempel på dataegenskaper som vi har använt i de tidigare självstudierna.

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

Tillbehörsegendom

I JavaScript är accessoregenskaper metoder som hämtar eller ställer in värdet på ett objekt. För det använder vi dessa två nyckelord:

  • get - att definiera en gettermetod för att få fastighetsvärdet
  • set - för att definiera en settermetod för att ställa in egenskapens värde

JavaScript Getter

I JavaScript används gettermetoder för att komma åt egenskaperna för ett objekt. Till exempel,

 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

I ovanstående program getName()skapas en getter-metod för att komma åt objektets egenskap.

 get getName() ( return this.firstName; )

Obs! För att skapa en gettermetod används getnyckelordet.

Och även när vi får åtkomst till värdet får vi tillgång till värdet som en egendom.

 student.getName;

När du försöker komma åt värdet som en metod uppstår ett fel.

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

JavaScript Setter

I JavaScript används settermetoder för att ändra värdena på ett objekt. Till exempel,

 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

I ovanstående exempel används settermetoden för att ändra värdet på ett objekt.

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

Obs! För att skapa en settermetod används setnyckelordet.

Såsom visas i ovanstående program, värdet av firstNameär Monica.

Därefter ändras värdet till Sarah.

 student.chageName = 'Sarah';

Obs! Setter måste ha exakt en formell parameter.

JavaScript Object.defineProperty ()

I JavaScript kan du också använda Object.defineProperty()metoden för att lägga till getters och setters. Till exempel,

 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

I exemplet ovan Object.defineProperty()används för att komma åt och ändra objektets egenskap.

Syntaxen för användning Object.defineProperty()är:

 Object.defineProperty(obj, prop, descriptor)

Den Object.defineProperty()metod tar tre argument.

  • Det första argumentet är objektnamnet.
  • Det andra argumentet är namnet på fastigheten.
  • Det tredje argumentet är ett objekt som beskriver egenskapen.

Intressanta artiklar...