Getters and Setters в JavaScript

Обзор

Геттеры и сеттеры в JavaScript используются для определения вычисленных свойств или accessors . Вычисленное свойство - это свойство, которое использует функцию для получения или установки значения объекта. Основная теория делает что-то вроде этого:

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 Ключевые слова

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;

Пользовательские Getters и Setters

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' );

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

var foo = {
    _a : 123, _b : 456, _c : 789,
    getA : function(){ return this.bar; },
    getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};

В приведенных выше примерах имена внутренних свойств абстрагируются с помощью подчеркивания, чтобы препятствовать пользователям просто делать foo.bar vs. 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