JavaScript Accessor 구현 설명

첫 번 째 는 흔히 볼 수 있 는 것 입 니 다.패 킷 스토어 Value 를 통 해 accessor 를 실현 하고 모든 브 라 우 저 에 적 용 됩 니 다.

 
function Sandy(val){ 
var value = val; 
this.getValue = function(){ 
return value; 
}; 
this.setValue = function(val){ 
value = val; 
}; 
} 
//usage 
var sandy = new Sandy("test"); 
sandy.value 
// => undefined 
sandy.setValue("test2") 
sandy.getValue 

다음은 자 바스 크 립 트 권위 안내(중국어 5 판)에서 P152 페이지 에서 패 킷 을 사용 하 는 예 입 니 다.

 
function makeProperty(o, name, predicate) { 
var value; //This is property value; 

//The setter method simply returns the value 
o['get' + name] = function() { return value;}; 

//The getter method stores the value or throws an exception if 
//the predicate rejects the value 
o['set' + name] = function(v) { 
if (predicate && !predicate(v) { 
throw 'set' + name + ': invalid value ' + v; 
} else { 
value = y; 
} 
} 
} 

//The following code demenstrates the makeProperty() method 
var o = {}; // Here is an empty object 

//Add property accessor methods getName and setName 
//Ensure that only string values are allowed 
makeProperty(o, 'Name', function(x) { return typeof x == 'string'; }); 

o.setName('Frank'); 　　//Set the property value; 
print(o.getName()); 　　//Get the property value 
o.setName(0); //Try to set a value of the wrong type 

두 번 째 방법 은 를 사용 하 는 것 입 니 다.defineSetter__와defineGetter__accessor 를 실현 하려 면 밑줄 을 보면 표준 이 아니 라 는 것 을 알 수 있 습 니 다.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 Changed to : ' + newVal); 
} 

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

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

var sandy = new Sandy("test"); 
sandy.value 
// => test 
sandy.value = "test2"; 
// => 'val is Changed to : test2' 
sandy.value 
// => "test2" 

defineG/Setter__또한'set','get'키 워드 를 사용 하여 원형 대상 에 accessor 를 정의 할 수 있 습 니 다.하나의 대상 에 대해 서도 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; 
}, 
set value(val){ 
this._value = val; 
} 
}; 

//Or 

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

마지막 방법 은 Object 의 정적 방법 인 define Property 를 사용 하여 하나의 대상 에 작용 합 니 다.이 방법 은 ES5 의 범주 에 속 해 야 합 니 다.현재 크롬 만 이 이 방법 을 지원 하 는 것 같 지만 Ie 8 도 지원 합 니 다.그러나 작업 대상 은 Dom 노드(Dom node)에 국한 되 어 있 습 니 다.IEBlog참조.MDN'enumerable','configuralbe'는 ES5 규범 중의 Property Attributes(속성 특성)에 속 합 니 다.여기 서 토론 하지 않 고 관심 있 는 구 글 이나 ES5 문 서 를 직접 보 세 요.^^