логотип PurpleSchool
логотип PurpleSchool

Дескрипторы в JavaScript

Автор

Дмитрий Нечаев

В JavaScript, дескрипторы свойств представляют собой специальные атрибуты, которые определяют поведение свойств объектов. Эти атрибуты позволяют более тонко управлять свойствами, включая их перечислимость, конфигурируемость, записываемость и доступ к значениям через геттеры и сеттеры. Дескрипторы свойств можно разделить на две категории: данные и доступ.

Дескрипторы данных

Дескрипторы данных предоставляют информацию о значениях свойств, их возможности записи, перечисляемости и конфигурируемости. Основные атрибуты дескриптора данных:

  • value – значение свойства.
  • writable – если true, значение свойства можно изменить с помощью оператора присваивания.
  • enumerable – если true, свойство будет перечислено в циклах (например, for...in).
  • configurable – если true, свойство можно удалять, и его дескриптор можно изменять.

Пример создания свойства с дескриптором данных:

let obj = {};

Object.defineProperty(obj, 'number', {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(obj.number); // 123
obj.number = 456;
console.log(obj.number); // 123, значение не изменится, так как writable: false

Дескрипторы доступа

Дескрипторы доступа не содержат прямого значения свойства, а предоставляют функции-геттеры и сеттеры для управления свойством. Атрибуты дескриптора доступа:

  • get – функция, которая вызывается, когда свойство читается.
  • set – функция, которая вызывается, когда свойству присваивается значение.
  • enumerable – аналогично дескриптору данных.
  • configurable – аналогично дескриптору данных.

Пример дескриптора доступа:

let user = {
  firstName: "Алексей",
  lastName: "Иванов"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    [this.firstName, this.lastName] = value.split(" ");
  },
  enumerable: true,
  configurable: true
});

console.log(user.fullName); // Алексей Иванов
user.fullName = "Мария Петрова";
console.log(user.firstName); // Мария
console.log(user.lastName); // Петрова

Методы для работы с дескрипторами

  • Object.defineProperty(obj, propName, descriptor): определяет новое свойство или изменяет существующее на объекте, и возвращает этот объект.
  • Object.defineProperties(obj, props): определяет множество свойств с использованием дескрипторов.
  • Object.getOwnPropertyDescriptor(obj, propName): возвращает дескриптор для свойства объекта.

Пример использования Object.defineProperties:

Object.defineProperties(user, {
  birthYear: {
    value: 1990,
    writable: false
  },
  age: {
    get() {
      let yearNow = new Date().getFullYear();
      return yearNow - this.birthYear;
    },
    enumerable: true
  }
});

console.log(user.age); // вычисляет возраст на основе birthYear

Заключение

Дескрипторы свойств в JavaScript — это мощный инструмент для более глубокого контроля над свойствами объектов. Они позволяют точно настраивать, как свойства должны вести себя при чтении, записи, перечислении и конфигурации. Это особенно полезно в разработке библиотек, API и в ситуациях, когда требуется строгий контроль над данными.

Стрелочка влевоГенераторы в JavaScript

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний