JavaScript의 Getters 및 Setters 플랫폼 support_javascript 기술에 대한 자세한 소개

John Resig의 초창기 기사로 대략적으로 번역되어 있습니다.
다행히도 마침내 "요즘 JavaScript의 Getter와 Setter는 매우 널리 사용되고 있으며 이는 모든 JavaScript 개발자의 중요한 관심사와 밀접하게 관련되어 있습니다."라고 말할 수 있게 된 것 같습니다. 젠장, 나는 이 말을 하기를 오랫동안 기다렸다.
먼저 Getter와 Setter가 무엇이고 왜 유용한지 간단히 살펴보겠습니다. 그런 다음 현재 Gettets 및 Setter를 지원하는 플랫폼을 살펴보겠습니다.
Getter 및 Setter
Getter 및 Setter를 사용하면 개체의 데이터를 빠르게 가져오거나 설정할 수 있습니다. 일반적으로 객체에는 다음과 같은 특정 값을 가져오고 설정하는 데 사용되는 두 가지 메서드가 있습니다.

코드 복사 코드 다음과 같습니다:

{
getValue: function(){
return this._value;
},
setValue: function(val){
this. _value = val;
}
}

이러한 방식으로 JavaScript를 작성하면 외부 세계가 액세스하지 못하도록 하는 속성을 숨길 수 있다는 분명한 이점이 있습니다. 곧장. 최종 코드는 다음과 같습니다(새로 생성된 Field 객체의 값을 저장하기 위해 클로저 사용):

코드 복사 코드 다음과 같습니다:

function Field(val){
var value = val;
this.getValue = function(){
return value; > this.setValue = function(val){
value = val;
};
}


따라서 다음과 같이 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var field = new Field("test")

field. value
// => 정의되지 않음
field.setValue("test2")
field.getValue()
// => "test2"


위의 "숨겨진 값 속성" 예제를 시뮬레이션하면 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function Field(val){

var value = val;
this.__defineGetter__("value", function(){
return value;
}); >this.__defineSetter__( "value", function(val){
value = val;
})
}


하지만 다음과 같이 쓰는 것을 좋아하지 않습니다. getter와 setter를 정의하려면(개인 변수가 어디에 기록되는지는 중요하지 않음) 다른 구문을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 함수 필드(val){

this.value = val;

}
Field.prototype = {
get value(){
return this._value
},
set value(val){
this._value = val;
}
};


이 구문은 이상하게 보일 수 있지만 잠시 사용해보면 이해하기 쉽습니다.
다음은 외부 세계에서 사용자 이름 배열을 얻을 수 있지만 원래의 숨겨진 사용자 개체를 얻을 수 없는 또 다른 예입니다.

코드 복사 코드는 다음과 같습니다. 기능 사이트(사용자){

this.__defineGetter__ ("users", function(){

// JS 1.6 Array map()
return users.map(function(user){
return user.name;
});
}
}


보너스로 객체 상속을 구현하는 데 도움이 될 수 있고 getter 및 setter도 고려하는 메서드를 작성했습니다

코드 복사 코드는 다음과 같습니다. // 한 개체를 다른 개체로 확장하는 도우미 메서드

extend(a ,b) {

for ( var i in b ) {
var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i)
if ( g || s ) {
if (g )
a.__defineGetter__(i, g);
if (s )
a.__defineSetter__(i, s)
} else
a[i] = b [i];
}

}


extend() 메소드에는 __lookupGetter__ 및 __lookupSetter__라는 두 가지 새로운 메소드가 있습니다. 실제로 getter와 setter를 사용하기 시작하면 이는 유용할 것입니다.
예를 들어 제가 처음으로extend() 메소드를 작성했을 때 여러 가지 오류가 발생하고 완전히 어지러웠습니다. 나중에 문제가 다음과 같은 간단한 진술에 있다는 것을 발견했습니다. a[i] = b[i];
객체 a에 i라는 이름의 setter가 있고 객체 b에도 i라는 이름의 getter가 있으면 a[ i]는 할당되지 않습니다. 다른 setter 메소드를 통하지만 b의 getter 메소드를 사용합니다. 이 두 가지 __lookup*__ 메서드를 사용하면 원래 함수를 얻을 수 있습니다. (이 문단이 좀 모호한데 원문은 다음과 같습니다)

i라는 객체 a에 setter가 존재하고 i라는 객체 b에 getter가 존재한다면 a[i]의 값 다른 setter 함수가 아니라 b의 getter 함수에서 계산된 값으로 설정되었습니다. 두 개의 __lookup*__ 메서드를 사용하면 해당 메서드에 사용된 원래 함수에 액세스할 수 있습니다(따라서 예를 들어 효과적인 확장 메서드를 작성할 수 있습니다). ).
　
다음 사항을 기억하세요:
객체에서 각 변수는 하나의 getter 또는 setter만 가질 수 있습니다. (따라서 value는 getter와 setter를 가질 수 있지만 value는 두 개의 getter를 가질 수 없습니다.)
getter나 setter를 삭제하는 유일한 방법은 object[name]을 삭제하는 것입니다. delete는 일부 공통 속성, getter 및 setter를 삭제할 수 있습니다.
__defineGetter__ 또는 __defineSetter__를 사용하면 이전에 정의된 동일한 이름의 getter 또는 setter, 심지어 속성도 재정의됩니다.
플랫폼
지원되는 브라우저는 :
Firefox
Safari 3
Opera 9.5
(원본 텍스트에는 Chrome이 언급되지 않았습니다. 아직(out)
다음 코드를 사용하여 브라우저를 테스트했습니다:

코드 복사 코드는 다음과 같습니다:

javascript:foo={get test(){ return "foo"; }};alert(foo.test)

In 또한 다음 두 엔진도 Getter 및 Setter를 지원합니다:
SpiderMonkey
Rhino 1.6R6(New)