геттеров и сеттеров в JavaScript
Обзор
Методы получения и установки в JavaScript используются для определения вычисляемых свойств или средств доступа . Вычисляемое свойство - это свойство, которое использует функцию для получения или установки значения объекта. Основная теория делает что-то вроде этого:
var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'
Это полезно для автоматического выполнения действий за кадром при обращении к свойству, таких как сохранение чисел в диапазоне, переформатирование строк, запуск событий с измененными значениями, обновление реляционных данных, предоставление доступа к частным свойствам и многое другое .
Примеры ниже показывают базовый синтаксис, хотя они просто получают и устанавливают значение внутреннего объекта, не делая ничего особенного. В реальных случаях вы должны изменить входное и / или выходное значение в соответствии с вашими потребностями, как указано выше.
получить / установить ключевые слова
ECMAScript 5 поддерживает ключевые слова get и set для определения вычисляемых свойств. Они работают со всеми современными браузерами, кроме IE 8 и ниже.
var foo = {
bar : 123,
get bar(){ return bar; },
set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;
Пользовательские геттеры и сеттеры
get и set не являются зарезервированными словами, поэтому они могут быть перегружены для создания ваших собственных функций вычисляемых свойств в разных браузерах. Это будет работать в любом браузере.
var foo = {
_bar : 123,
get : function( name ){ return this[ '_' + name ]; },
set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );
Или для более компактного подхода можно использовать одну функцию.
var foo = {
_bar : 123,
value : function( name /*, value */ ){
if( arguments.length < 2 ){ return this[ '_' + name ]; }
this[ '_' + name ] = value;
}
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );
Избегайте таких действий, которые могут привести к раздуванию кода.
var foo = {
_a : 123, _b : 456, _c : 789,
getA : function(){ return this.bar; },
getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};
В приведенных выше примерах имена внутренних свойств абстрагируются с подчеркиванием, чтобы пользователи не просто делали foo.bar против foo.get( 'bar' ) и получали «сырое» значение. Вы можете использовать условный код для выполнения различных действий в зависимости от имени свойства, к которому осуществляется доступ (через параметр name).
Object.defineProperty ()
Использование Object.defineProperty() - это еще один способ добавления геттеров и сеттеров, который можно использовать для объектов после их определения. Его также можно использовать для настройки настраиваемых и перечислимых поведений. Этот синтаксис также работает с IE 8, но, к сожалению, только для объектов DOM.
var foo = { bar : 123 };
Object.defineProperty( foo, 'bar', {
get : function(){ return bar; },
set : function( value ){ this.bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;
__ defineGetter __ ()
Наконец, __defineGetter__() - еще один вариант. Он устарел, но все еще широко используется в Интернете и поэтому вряд ли исчезнет в ближайшее время. Он работает во всех браузерах, кроме IE 10 и ниже. Хотя другие опции также хорошо работают не в IE, поэтому этот вариант не очень полезен.
var foo = { bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this.bar; } );
foo.__defineSetter__( 'bar', function( value ){ this.bar = value; } );
См. Также
MDN get , set ,
Object.defineProperty () , __ defineGetter __ () , __ defineSetter __ ()
MSDN
IE8 Getter Support