get

Синтаксис get привязывает свойство объекта к функции, которая будет вызываться при обращении к этому свойству. Его также можно использовать в классах.

Попробуйте

const obj = {
  log: ["a", "b", "c"],
  get latest() {
    return this.log[this.log.length - 1];
  },
};

console.log(obj.latest);
// Expected output: "c"

Синтаксис

{ get prop() { /* … */ } }
{ get [expression]() { /* … */ } }

Существуют некоторые дополнительные синтаксические ограничения:

• У getter должно быть ровно ноль параметров.

Параметры

prop

Имя свойства, которое будет связано с данной функцией. Как и другие свойства в инициализаторах объектов, это может быть строковый литерал, числовой литерал или идентификатор.

expression

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

Описание

Иногда желательно разрешить доступ к свойству, которое возвращает динамически вычисляемое значение, или вы можете захотеть отразить состояние внутренней переменной, не требуя явных вызовов методов. В JavaScript это можно сделать с помощью getter.

Свойство объекта является либо свойством данных, либо свойством-аксессором, но оно не может быть одновременно и тем, и другим. Читайте Object.defineProperty() для получения дополнительной информации. Синтаксис getter позволяет указать функцию getter в инициализаторе объекта.

const obj = {
  get prop() {
    // getter, the code executed when reading obj.prop
    return someValue;
  },
};

Свойства, определенные с использованием этого синтаксиса, являются собственными свойствами создаваемого объекта, и они являются настраиваемыми и перечислимыми.

Примеры

Определение getter для новых объектов в инициализаторах объектов

Это создаст псевдо-свойство latest для объекта obj, которое будет возвращать последний элемент массива в log.

const obj = {
  log: ["example", "test"],
  get latest() {
    return this.log.at(-1);
  },
};
console.log(obj.latest); // "test"

Обратите внимание, что попытка присвоить значение latest не изменит его.

Использование getter в классах

Вы можете использовать тот же синтаксис для определения публичных геттеров экземпляра, доступных для экземпляров класса. В классах вам не нужен разделитель-запятая между методами.

class ClassWithGetSet {
  #msg = "hello world";
  get msg() {
    return this.#msg;
  }
  set msg(x) {
    this.#msg = `hello ${x}`;
  }
}

const instance = new ClassWithGetSet();
console.log(instance.msg); // "hello world"

instance.msg = "cake";
console.log(instance.msg); // "hello cake"

Свойства getter определяются в свойстве prototype класса и, следовательно, совместно используются всеми экземплярами класса. В отличие от свойств getter в объектных литералах, свойства getter в классах не перечисляются.

Статические геттеры и приватные геттеры используют схожие синтаксисы, которые описаны на страницах static и приватные элементы.

Удаление getter с помощью оператора delete

Если вы хотите удалить getter, вы можете просто delete его:

delete obj.latest;

Определение getter для существующих объектов с помощью defineProperty

Чтобы добавить getter к существующему объекту позже в любое время, используйте Object.defineProperty().

const o = { a: 0 };

Object.defineProperty(o, "b", {
  get() {
    return this.a + 1;
  },
});

console.log(o.b); // Runs the getter, which yields a + 1 (which is 1)

Использование вычисляемого имени свойства

const expr = "foo";

const obj = {
  get [expr]() {
    return "bar";
  },
};

console.log(obj.foo); // "bar"

Определение статических геттеров

class MyConstants {
  static get foo() {
    return "foo";
  }
}

console.log(MyConstants.foo); // 'foo'
MyConstants.foo = "bar";
console.log(MyConstants.foo); // 'foo', a static getter's value cannot be changed

Умные / самоперезаписываемые / ленивые геттеры

Геттеры предоставляют способ определить свойство объекта, но они не вычисляют значение свойства до тех пор, пока к нему не обратятся. Геттер откладывает стоимость вычисления значения до тех пор, пока значение не понадобится. Если оно никогда не понадобится, вы никогда не заплатите за его стоимость.

Дополнительным методом оптимизации для ленивого или отложенного вычисления значения свойства и его кеширования для последующего доступа являются умные (или мемоизированные) геттеры. Значение вычисляется при первом вызове геттера, а затем кешируется, так что последующие обращения возвращают кешированное значение без перевычисления. Это полезно в следующих ситуациях:

• Если вычисление значения свойства является дорогостоящим (требует много ОЗУ или процессорного времени, запускает рабочие потоки, извлекает удаленный файл и т. д.).
• Если значение не нужно прямо сейчас. Оно будет использовано позже, а в некоторых случаях оно вообще не будет использовано.
• Если оно используется, оно будет доступно несколько раз, и нет необходимости пересчитывать значение, которое никогда не изменится или не должно быть пересчитано.

В следующем примере объект имеет getter в качестве собственного свойства. При доступе к свойству оно удаляется из объекта и добавляется снова, но на этот раз неявно как свойство данных. Наконец, возвращается значение.

const obj = {
  get notifier() {
    delete this.notifier;
    this.notifier = document.getElementById("bookmarked-notification-anchor");
    return this.notifier;
  },
};

Обнаружение функций

Многие функции принимают объект и извлекают из него отдельные свойства как отдельные параметры (этот объект-параметр известен как options bag). Вы можете обнаружить, поддерживается ли конкретный параметр, используя getter для отслеживания того, было ли извлечено свойство. Этот пример проверяет, поддерживается ли параметр colorType методом HTMLCanvasElement.getContext().

function isColorTypeSupported() {
  let supported = false;
  const obj = {
    get colorType() {
      supported = true;
      return undefined;
    },
  };
  document.createElement("canvas").getContext("2d", obj);
  return supported;
}

get против. defineProperty

Хотя использование ключевого слова get и Object.defineProperty() дают схожие результаты, существует тонкое различие между ними при использовании в классах. Синтаксис get определяет свойство в прототипе экземпляра, в то время как Object.defineProperty() определяет свойство в экземпляре, к которому он применяется.

class Example {
  get hello() {
    return "world";
  }
}

const obj = new Example();
console.log(obj.hello);
// "world"

console.log(Object.getOwnPropertyDescriptor(obj, "hello"));
// undefined

console.log(
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), "hello"),
);
// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }

Спецификации

Совместимость с браузерами

См. также

• Руководство по работе с объектами
• Функции
• set
• Object.defineProperty()
• Инициализатор объектов
• class
• Аксессоры свойств
• Несовместимое изменение ES5: функции literal getter и setter теперь должны иметь ровно ноль или один аргумент Джеффа Уолдена (2010)
• Больше изменений SpiderMonkey: удаляется древний, эзотерический, очень редко используемый синтаксис для создания getter и setter Джеффа Уолдена (2010)