- Object.defineProperty()
- Object.defineProperties()
간단설명객체의 프로퍼티를 설정한다.
물론 obj.p = "x" 처럼 할 수 있는데.
위 메소드를 사용하면 상세 설정이 가능. readOnly, 커스터마이즈된 get 과 set 등등
- ECNAScript 5.1부터 지원.
- IE는 8에서 부분 지원, 9부터 정식 지원
Object.defineProperty(obj, prop, descriptor)
# 기본 설정 및 설명
descriptor = {
configurable:flase, //true일 경우 프로퍼티 삭제(delete obj.prop) 가능, writable 설정 변경 가능
enumerable:false, //true일 경우 for(var x in obj) 에서 프로퍼티로 보임
value:undefined, //기본값 설정. get,set 과 같이 사용 불가.
writable:false, //값 수정 가능 여부. get,set 과 같이 사용 불가.
get:undefined, //obj.prop 에서 값을 가져올 때 동작. value,writable 과 같이 사용 불가
set:undefined, //obj.prop 에 값을 넣을 때 동작. value,writable 과 같이 사용 불가
}
예제 1var o = {};
(function(o){
var _name = "";
Object.defineProperty(o, 'name', {
get:function(){ return _name; },
set:function(wcb){
return function(newValue){
return _name = newValue+"_new";
}
}(o),
//value:"init", //기본값 (get,set 과 같이 사용불가)
//writable: true, //값 수정 가능여부 (get,set 과 같이 사용불가)
enumerable: true, //목록 열거시 표시여부
configurable: true //삭제 가능여부. writable 속성 변경 가능 여부
});
})(o);
o.x = "xVal"
o.y = "yVal"
console.log(o.name); //기본값 _name의 값인 ""가 나와야함.
//=> ""
o.name = "111"; //set 111_new 가 될 것으로 예상.
console.log(o.name); //get 111_new 를 출력
//=> 111_new
for(var x in o){
console.log(x)
}
//=> name,x,y
delete o.name //삭제시도.
//=> true
console.log(o.name); //삭제 안되고 값니 나와야함.
//=> undefined
for(var x in o){ //삭제되어서 사라짐
console.log(x)
}
//=> x,y
예제2
var o = {};
(function(o){
var _name = "";
Object.defineProperty(o, 'name', {
value:"init", //기본값 (get,set 과 같이 사용불가)
writable: false, //값 수정 가능여부 (get,set 과 같이 사용불가)
enumerable: false, //목록 열거시 표시여부
//configurable: false //삭제 가능여부. writable 속성 변경 가능 여부
});
})(o);
o.x = "xVal"
o.y = "yVal"
console.log(o.name); //기본값 undefined가 나와야함.
//=> init
o.name = "111"; //값이 수정 안되야함. (writable: false 효과)
console.log(o.name); //init 를 출력
//=> init
for(var x in o){
console.log(x)
}
//=> x,y //name은 출력 안됨. (enumerable: false 효과)
input.value 를 재정의 하는 경우https://stackoverflow.com/questions/42427606/event-when-input-value-is-changed-by-javascript
descriptor.set = function(val) {
//changing to native setter to prevent the loop while setting the value
Object.defineProperty(this, "value", {set:inputSetter});
this.value = val;
//Custom code triggered when $input.value is set
console.log("Value set: "+val);
//changing back to custom setter
Object.defineProperty(this, "value", descriptor);
$(this.parentNode).attr("data-val",val);
}
//Last add the new "value" descriptor to the $input element
Object.defineProperty(el, "value", descriptor);
