Геттеры и сеттеры в 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._a; },
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 this._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; } );
Также стоит отметить, что в последних примерах внутренние имена должны отличаться от имен доступа, чтобы избежать рекурсии (т. foo.barЕ. foo.get(bar)Вызывающий foo.barвызов вызывающий foo.get(bar)...).
Смотрите также
MDN get , set ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ ()
MSDN
IE8 Getter Поддержка