JavaScript с нуля

История двух свойств

Внешне свойства-аксессоры и свойства данных очень схожи. Для свойств данных вы можете производить чтение и запись свойства:

theObj.storedValue = "Unique snowflake!"; // запись

console.log(theObj.storedValue); // чтение

С помощью свойств-аксессоров вы можете, в принципе, то же самое:

myObj.storedValue = "Also a unique snowflake!"; // запись

console.log(myObj.storedValue); // чтение

Глядя на само использование свойства, мы не можем сказать, является ли оно свойством данных или свойством-аксессором. Чтобы обнаружить отличие, нам нужно посмотреть туда, где свойство фактически определено. Взгляните на следующий код, в котором внутри объекта zorb определено несколько свойств:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

Первое сверху — это message, стандартное свойство данных:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

Мы узнаем, что это свойство данных, так как в нем присутствует только имя свойства и значение. А вот дальше все немного интереснее. Следующее свойство — это greeting, которое не похоже ни на одно из свойств, встреченных нами ранее:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

Вместо того чтобы обходиться именем и значением, как message, свойство greeting разделено на две функции, которым предшествует ключевое слово get или set:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

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

zorb.greeting = "Hola!";

console.log(zorb.greeting);

Самое же интересное происходит на уровне геттеров и сеттеров, поэтому мы рассмотрим их глубже.