Функция get в javascript

JavaScript Object Accessors

ECMAScript 5 (ES5 2009) introduced Getter and Setters.

Getters and setters allow you to define Object Accessors (Computed Properties).

JavaScript Getter (The get Keyword)

This example uses a lang property to get the value of the language property.

Example

// Create an object:
const person = firstName: «John»,
lastName: «Doe»,
language: «en»,
get lang() return this.language;
>
>;

// Display data from the object using a getter:
document.getElementById(«demo»).innerHTML = person.lang;

JavaScript Setter (The set Keyword)

This example uses a lang property to set the value of the language property.

Example

const person = <
firstName: «John»,
lastName: «Doe»,
language: «»,
set lang(lang) <
this.language = lang;
>
>;

// Set an object property using a setter:
person.lang = «en»;

// Display data from the object:
document.getElementById(«demo»).innerHTML = person.language;

JavaScript Function or Getter?

What is the differences between these two examples?

Example 1

const person = <
firstName: «John»,
lastName: «Doe»,
fullName: function() <
return this.firstName + » » + this.lastName;
>
>;

// Display data from the object using a method:
document.getElementById(«demo»).innerHTML = person.fullName();

Example 2

const person = <
firstName: «John»,
lastName: «Doe»,
get fullName() <
return this.firstName + » » + this.lastName;
>
>;

// Display data from the object using a getter:
document.getElementById(«demo»).innerHTML = person.fullName;

Example 1 access fullName as a function: person.fullName().

Example 2 access fullName as a property: person.fullName.

The second example provides a simpler syntax.

Data Quality

JavaScript can secure better data quality when using getters and setters.

Using the lang property, in this example, returns the value of the language property in upper case:

Example

// Create an object:
const person = firstName: «John»,
lastName: «Doe»,
language: «en»,
get lang() return this.language.toUpperCase();
>
>;

// Display data from the object using a getter:
document.getElementById(«demo»).innerHTML = person.lang;

Using the lang property, in this example, stores an upper case value in the language property:

Example

const person = <
firstName: «John»,
lastName: «Doe»,
language: «»,
set lang(lang) <
this.language = lang.toUpperCase();
>
>;

// Set an object property using a setter:
person.lang = «en»;

// Display data from the object:
document.getElementById(«demo»).innerHTML = person.language;

Why Using Getters and Setters?

• It gives simpler syntax
• It allows equal syntax for properties and methods
• It can secure better data quality
• It is useful for doing things behind-the-scenes

Object.defineProperty()

The Object.defineProperty() method can also be used to add Getters and Setters:

A Counter Example

// Define setters and getters
Object.defineProperty(obj, «reset», get : function ()
>);
Object.defineProperty(obj, «increment», get : function () >);
Object.defineProperty(obj, «decrement», get : function ()
>);
Object.defineProperty(obj, «add», set : function (value)
>);
Object.defineProperty(obj, «subtract», set : function (value)
>);

// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Источник

getter

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

Интерактивный пример

Синтаксис

Параметры

Имя свойства для привязывания к заданной функции.

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

Описание

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

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

Учтите следующее при работе с синтаксисом get :

• Он может иметь идентификатор, который является либо числом, либо строкой;
• Он должен иметь ровно 0 параметров (смотрите Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments для доп. информации);
• Он не должен появляться в объектном литерале вместе с другим get или через ввод данных для того же свойства ( < get x() < >, get x() < >> и < x: . get x() < >> запрещены).

Геттер можно удалить при помощи оператора delete .

Примеры

Определение геттера на новом объекте в момент инициализации этого объекта

Ниже создаётся псевдо-свойство latest для объекта obj , который выведет последний элемент массива в консоль лог.

const obj =  log: ['example','test'], get latest()  if (this.log.length === 0) return undefined; return this.log[this.log.length - 1]; > > console.log(obj.latest); // "test" 

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

Удаление геттера оператором delete

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

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

Для добавления геттера к существующему объекту в любое время используйте Object.defineProperty().

const o = a: 0>; Object.defineProperty(o, 'b',  get: function()  return this.a + 1; > >); console.log(o.b) // Runs the getter, which yields a + 1 (which is 1) 

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

Примечание: Вычисляемые свойства являются экспериментальной технологией, частью предложений спецификации ECMAScript 6, и массовой поддержки браузерами пока нет. Код ниже вызовет синтаксическую ошибку в неподдерживаемых средах.

var expr = "foo"; var obj =  get [expr]()  return "bar"; > >; console.log(obj.foo); // "bar" 

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

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

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

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

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

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

get notifier()  delete this.notifier; return this.notifier = document.getElementById("bookmarked-notification-anchor"); >, 

Для Firefox смотрите также модуль XPCOMUtils.jsm , который определяет функцию defineLazyGetter() .

get и defineProperty

Использование ключевого слова get и Object.defineProperty() даёт похожие результаты, но при использовании в classes между ними есть тонкая разница.

При использовании 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 > 

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

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник