JavaScript 접근자 구현 지침_javascript 기술

첫 번째는 비교적 일반적이며 Store Value를 닫아 접근자를 구현하며

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

function Sandy(val){
var value = val;
this.getValue = function(){
return value; .setValue = function(val){
value = val;
}
//usage
var sandy("test");
// => 정의되지 않음
sandy.setValue("test2")
sandy.getValue


다음은 JavaScript에 대한 최종 가이드(중국어 5판) P152페이지입니다. ) 클로저 사용 예시

코드 복사

코드는 다음과 같습니다. makeProperty 함수 (o, name, predicate) { var value; //속성값입니다.

//setter 메소드는 단순히 값을 반환합니다.
o['get' name] = function() { return value ;};

//
//조건자가 값을 거부하는 경우 getter 메서드는 값을 저장하거나 예외를 발생시킵니다.
o['set' name] = function(v) {
if (predicate && !predicate(v) {
throw 'set' name ': 잘못된 값 ' v;
} else {
value = y;
}
}
}

//다음 코드는 makeProperty() 메소드를 보여줍니다.
var o = {}; // 여기에는 빈 객체가 있습니다.

//속성 접근자 메소드 추가 getName and setName
//문자열 값만 허용되는지 확인
makeProperty(o, 'Name', function(x) { return typeof x == 'string'; }); o.setName(' Frank'); //속성 값 설정
print(o.getName()); //속성 값 가져오기
o.setName(0); 잘못된 유형의 값


두 번째 방법은 __defineSetter__ 및 __defineGetter__를 사용하여 접근자를 구현하는 것입니다. 밑줄을 보면
표준
이 아니며 적합하다는 것을 알 수 있습니다. Firefox 2.0, Safari 3.0, Google Chrome 1.0 및 Opera 9.5의 경우
MDN
을 참조하세요.

코드 복사

코드는 다음과 같습니다. function Sandy(val){ var value = val, _watch = function(newVal) { console.log('val is 다음으로 변경됨: ' newVal);

this.__defineGetter__("value", function(){
return value;
}); ("value", function(val){
value = val;
_watch(val);
})
}

var sandy = new Sandy("test" );
sandy.value
/ / => test
sandy.value = "test2"// => 'val이 다음으로 변경되었습니다: test2'

// => "test2"


__defineG/Setter__ 외에도 'set' 및 'get' 키워드를 사용하여 프로토타입 객체에 접근자를 정의할 수도 있습니다. Firefox 2.0 및 Safari 3.0, Google Chrome 1.0 및 Opera 9.5에도 적용 가능합니다.




코드 복사


코드는 다음과 같습니다.

function Sandy(val ){

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

값 설정(val){

this._value = val;

//또는

var sandy = {
'_value' : 'sandy',
get value() {
return this._value;
},
값 설정 (val) {
this._value = val;
}
}


마지막 메소드는 단일 객체에 대해 작동하는 Object의 정적 메소드인 DefineProperty를 사용합니다. 현재는

Chrome에서만 지원하는 것으로 보이며, 실제로 Ie8에서도 지원하지만 Operation 객체는 Dom 노드(Dom node)로 제한되어 있습니다.
를 참조하세요. IEBlog
이 방법의 사용은
MDN
을 참조하세요.

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

var sandy = {}, rValue;
Object.defineProperty(sandy, 'value' ,
{
'set' : function(val) {
rValue = val;
},
'get' : function() {
return rValue;
},
'enumerable' : true,
'configurable' : true
}
)
//Ie8
Object.defineProperty(document.body, "description", {
get : function () {
return this.desc;
},
set : function (val) {
this.desc = val;
}
});
document.body.description = "컨텐츠 컨테이너"
// document.body.description 이제 "콘텐츠 컨테이너"를 반환합니다.

'enumerable','configuralbe'는 ES5 사양의 속성 속성(속성 특성)에 속합니다. 여기서는 논의하지 않겠습니다. ES5 문서를 직접 검색하세요. ^ ^