Геттери та сетери в 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'
Це корисно для того, щоб автоматично робити речі за кадром, коли доступ до ресурсу, наприклад, зберігання чисел у діапазоні, переформатування рядків, запуск подій, що змінюються значенням, оновлення реляційних даних, надання доступу до приватних ресурсів тощо.
Наведені нижче приклади показують основний синтаксис, хоча вони просто отримують і встановлюють внутрішнє значення об'єкта, не роблячи нічого особливого. У реальних випадках ви можете змінити вхідні та / або вихідні значення відповідно до ваших потреб, як зазначено вище.
get / set Ключові слова
Підтримки getта setключові слова ECMAScript 5 для визначення обчислюваних властивостей. Вони працюють з усіма сучасними браузерами, крім 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' )та отримувати значення "uncooked". Ви можете використовувати умовний код, щоб робити різні речі залежно від назви ресурсу, до якого доступ (через 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 отримати , встановити ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ ()
MSDN
IE8 Getter Support