Vlastnosti vlastností v Javascriptu

AndreaAndrea

Vlastnosti (členské proměnné) objektu mají také svoje vlastnosti (deskriptory), které nám umožňují přímo ovlivnit chování vlastností objektů 😅. V našich programech běžně definujeme vlasnosti objektů pomocí přiřazovacího operátoru (=)

obj.prop = 'Hello'

Existuje však jiný způsob bež je pomocí operátoru jak můžeme vlastnost objektu vytvořit a změnit. Samotná hodnota vlastnosti se totiž v JS bere jako vlastnosti value. Můžeme také u vlastnosti nastavit writable na false, abychom zabránili její změně hodnoty. Nebo můžeme nastavit vlastnost enumerable na false, abychom skryli vlastnost při procházení objektu pomocí iterátoru.

Jak se to dělá? Pomocí metody Object.defineProperty(), která přijímá objekt, název vlastnosti a objekt s nastavením vlastností jako poslední argument:

Object.defineProperty(obj, 'prop', {
  value: 'Hello'
});

Definování nové vlastnosti

Je důležité zmínit, že existuje rozdíl, když definujeme vlastnosti objektu pomocí přiřazovacího operátoru a metodou Object.defineProperty(). Volání Object.defineProperty vlastnosti nastaví jiné výchozí hodnoty - hlavně co se týče immutabily (neměnnosti). Po nastavení vlastnosti ji už nelze změnit pomocí přiřazovacího operátoru (=) ani pomocí jiné metody.

Například:

const obj = {};
Object.defineProperty(obj, 'prop', {
  value: 'Hello'
});

obj.prop = 'Goodbye'; // nezmění hodnotu vlastnosti

Object.defineProperty(obj, 'prop', {
  value: 'Goodbye'
}); // nezmění hodnotu vlastnosti

Chceme-li změnit hodnotu nezměnitelné vlastnosti, musíme použít metodu Object.defineProperty() znovu a nastavit vlastnost writable na true. Například:

const obj = {};
Object.defineProperty(obj, 'prop', {
  value: 'Hello',
  writable: true
});

obj.prop = 'Goodbye'; // změní hodnotu vlastnosti na 'Goodbye'

Object.defineProperty(obj, 'prop', {
  value: 'Goodbye',
  writable: true
}); // změní hodnotu vlastnosti na 'Goodbye'

Enumerable

Enumerable oblivňuje způsob, jakým je vlastnost viditelná při procházení objektu pomocí for...in nebo Object.keys(). Pokud je enumerable nastaven na false, nebude vlastnost viditelná při procházení objektu iterátorem. Příklad

const obj = {};
Object.defineProperty(obj, 'prop', {
  value: 'hidden',
  enumerable: false
});

for (let key in obj) {
  console.log(key); // žádný výstup
}

console.log(Object.keys(obj)); // []

Další vlastnosti které můžeme měnit

Kromě hodnot value a writable, které jsme si ukázali, můžeme ovlivňovat další vlastnosti, kterými jsou

  • configurable: Určuje, zda lze změnit vlastnosti writable, enumerable a configurable pomocí metody Object.defineProperty().

  • get: Funkce, která se volá při čtení hodnoty vlastnosti.

  • set: Funkce, která se volá při nastavování hodnoty vlastnosti.