Object.defineProperty() , Object.defineProperties()

tag:1 #javascript

간단설명
객체의 프로퍼티를 설정한다.
물론 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 과 같이 사용 불가
}


예제 1
var 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);


댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
tag:2 #etc #공지
mins01
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자
공대여자
tag:1 #javascript
공대여자
tag:1 #javascript
공대여자