Property Accessor didalam Object Class Javascript

Property Accessor didalam Object Class Javascript

Melalui objek class kita juga dapat mengubah nilai properti seperti ini:

  1. class Car {
  2.     constructor(manufacture, color) {
  3.         this.manufacture = manufacture;
  4.         this.color = color;
  5.         this.enginesActive = false;
  6.     }
  7. }
  8.  
  9. const johnCar = new Car("Honda", "Red");
  10. console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: Red
  11.  
  12. johnCar.color = "White"; // Mengubah nilai properti color menjadi white
  13.  
  14. console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: White
Dengan class kita juga dapat mengimplementasi getter/setter sebuah properti menjadi sebuah method seperti ini:
  1. class Car {
  2.     constructor(manufacture, color) {
  3.         this.manufacture = manufacture;
  4.         this._color = color;
  5.         this.enginesActive = false;
  6.     }
  7.     
  8.     get color() {
  9.         return `Warna mobile ${this._color}`;
  10.     }
  11.     
  12.     set color(value) {
  13.         console.log(`Warna mobil diubah dari ${this._color} menjadi ${value}`);
  14.         this._color = value;
  15.     }
  16. }
  17.  
  18. const johnCar = new Car("Honda", "Red");
  19. console.log(johnCar.color); // output -> Warna Mobil: Red
  20. johnCar.color = "White"; // Mengubah nilai properti color menjadi white
  21. console.log(johnCar.color); // output -> Warna Mobil: White
Perhatikan juga ketika kita menerapkan getter/setter pada properti class. Kita perlu mengubah atau membedakan penamaan properti aslinya dengan property accessor yang kita buat. Berdasarkan code convention yang ada kita perlu mengubah properti asli class-nya dengan menambahkan underscore di depan nama propertinya (_color). Tanda underscore berfungsi sebagai tanda bahwa properti _color tidak sebaiknya diakses langsung, namun harus melalui property accessor (getter/setter)
Baca Juga
SHARE
Subscribe to get free updates

Related Posts