> 웹 프론트엔드 > JS 튜토리얼 > JavaScript Getters 및 Setters 플랫폼 지원 등에 대한 자세한 소개.

JavaScript Getters 및 Setters 플랫폼 지원 등에 대한 자세한 소개.

高洛峰
풀어 주다: 2017-01-03 17:06:37
원래의
1179명이 탐색했습니다.

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 
// => undefined 
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(개인 변수)를 정의하는 것을 선호합니다. ) 객체의 프로토타입에서 어디에 작성하든 상관없습니다.) 다른 구문을 사용할 수 있습니다.

function Field(val){ 
this.value = val; 
} 
Field.prototype = { 
get value(){ 
return this._value; 
}, 
set value(val){ 
this._value = val; 
} 
};
로그인 후 복사

이 구문은 믿을 수 없을 것 같지만 잠시 사용해 본 후에는 쉽게 받아들일 수 있습니다.
다음은 외부 세계에서 사용자 이름 배열을 얻을 수 있지만 원래의 숨겨진 사용자 개체를 얻을 수 없는 또 다른 예입니다. 예를 들어 제가 처음으로extend() 메소드를 작성했을 때 여러 가지 오류가 발생하고 완전히 어지러웠습니다. 나중에 문제가 다음과 같은 간단한 진술에 있다는 것을 발견했습니다. a[i] = b[i];

function Site(users){ 
this.__defineGetter__("users", function(){ 
// JS 1.6 Array map() 
return users.map(function(user){ 
return user.name; 
}); 
}; 
}
로그인 후 복사
객체 a에 i라는 이름의 setter가 있고 객체 b에도 i라는 이름의 getter가 있으면 a[ i]는 할당되지 않습니다. 다른 setter 메소드를 통하지만 b의 getter 메소드를 사용합니다. 이 두 가지 __lookup*__ 메서드를 사용하면 원래 함수를 얻을 수 있습니다. (이 문단이 좀 모호한데 원문은 다음과 같습니다)

i라는 객체 a에 setter가 존재하고 i라는 객체 b에 getter가 존재한다면 a[i]의 값 다른 setter 함수가 아니라 b의 getter 함수에서 계산된 값으로 설정되었습니다. 두 개의 __lookup*__ 메서드를 사용하면 해당 메서드에 사용된 원래 함수에 액세스할 수 있습니다(따라서 예를 들어 효과적인 확장 메서드를 작성할 수 있습니다). ).
// Helper method for extending one object with another 
function 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]; 
} 
return a; 
}
로그인 후 복사
 

다음 사항을 기억하세요.
객체 내에서 각 변수는 하나의 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이 언급되지 않았으며 아직 출시되지 않았습니다.)
저는 다음 코드 테스트 브라우저:


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

더 많은 JavaScript Getters 및 Setters Setters 플랫폼 지원에 대한 자세한 소개 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
javascript:foo={get test(){ return "foo"; }};alert(foo.test);
로그인 후 복사
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿