JavaScript의 게터와 세터

개요

JavaScript의 Getter 및 Setter는 계산 된 속성 또는 접근 자를 정의하는 데 사용됩니다 . 계산 된 속성은 함수를 사용하여 개체 값을 가져 오거나 설정하는 속성입니다. 기본 이론은 다음과 같습니다.

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.barvs 를 사용하지 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 지원

답변

function Circle(radius) {
    this.radius = radius;
}

Object.defineProperty(Circle.prototype, 'circumference', {
    get: function() { return 2*Math.PI*this.radius; }
});

Object.defineProperty(Circle.prototype, 'area', {
    get: function() { return Math.PI*this.radius*this.radius; }
});

c = new Circle(10);
console.log(c.area); // Should output 314.159
console.log(c.circumference); // Should output 62.832

var settings = {
    firstname: 'John',
    lastname: 'Smith',
    get fullname() { return this.firstname + ' ' + this.lastname; }
};

console.log(settings.fullname);

var address = {
    set raw(what) {
        var loc = what.split(/\s*;\s*/),
        area = loc[1].split(/,?\s+(\w{2})\s+(?=\d{5})/);

        this.street = loc[0];
        this.city = area[0];
        this.state = area[1];
        this.zip = area[2];
    }
};

address.raw = '123 Lexington Ave; New York NY  10001';
console.log(address.city);

var counter = function() {
    var count = 0;

    this.inc = function() {
        count++;
    };

    this.getCount = function() {
        return count;
    };
};

var i = new Counter();
i.inc();
i.inc();
// writes "2" to the document
document.write( i.getCount());

var employee = {
    first: "Boris",
    last: "Sergeev",
    get fullName() {
        return this.first + " " + this.last;
    },
    set fullName(value) {
        var parts = value.toString().split(" ");
        this.first = parts[0] || "";
        this.last = parts[1] || "";
    },
    email: "boris.sergeev@example.com"
};

console.log(employee.fullName); //Boris Sergeev
employee.fullName = "Alex Makarenko";

console.log(employee.first);//Alex
console.log(employee.last);//Makarenko
console.log(employee.fullName);//Alex Makarenko