logo image
메인
기술
HOME
기술

Object.defineProperty() , Object.defineProperties()

목록
#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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
game_tictactoe
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
:scope selector , querySelector 에서 this, self node 지정
4.18
4.19
4.20
4.21
4.22
4.23
ui_treemap
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4
tag