• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Object] JS - object ECMAScript 5 - 객체혁명

ECMAScript 5 (ES5)는 JS에 많은 새로운 객체 메소드 추가.

 

ES5 새로운 객체 방법

 

// 객체 속성 추가/변경

Object.defineProperty(object, property, descriptor)


// 많은 객체 속성 추가/변경

Object.defineProperties(object, descriptors)

 



// 속성에 접근

Object.getOwnPropertyDescriptor(object, property)


// 모든 속성을 배열로 반환

Object.getOwnPropertyNames(object)

 



// 열거 가능한 속성을 배열로 반환

Object.keys(object)


// 프로토 타입에 접근

Object.getPrototypeOf(object)

 



// 객체에 속성 추가 방지

Object.preventExtensions(object)


// 객체에 속성을 추가 할 수 있으면 true 반환.

Object.isExtensible(object)

 



// (값이 아닌) 객체 속성 변경 방지

Object.seal(object)


// 객체가 변경방지되어 있으면 true 반환

Object.isSealed(object)

 



// 객체 변경 방지

Object.freeze(object)


// 객체가 고정된 경우 true 반환

Object.isFrozen(object)

 

 

 

속성값 변경

 

[구문]

Object.defineProperty(object, property_name, {value : property_value})

 


 

[예제]

 

<p id="demo"></p>


<script>

var hz = {

  name : "홈짱닷컴",

  host : "HOMZZANG.COM",

  open : 2012 

};


Object.defineProperty(hz, "host", {value:"Homzzang.com"})


document.getElementById("demo").innerHTML = hz.host;

</script>

 

결과보기: Homzzang.com

 

 

메타 데이터 변경

 

1.

ES5 사용하면 다음과 같은 속성 메타 데이터 변경 가능.

 

writable : true      // 속성값 변경 가능.

enumerable : true    // 속성 열거 가능.

configurable : true  // 속성 재구성 가능.

 

writable : false      // 속성값 변경 불가능.

enumerable : false      // 속성 열거 불가능.

configurable : false     // 속성 재구성 불가능.

 


 

2.

ES5를 사용하면 getter・setter 변경 가능.

 

// getter 정의

get: function() { return host }

 

// setter 정의

set: function(value) { host = value }

 


 

// hz 객체의 host 속성을 읽기전용으로 설정.

Object.defineProperty(hz, "host", {writable:false});


// hz 객체의 host 속성을 열거 불가능으로 설정.

Object.defineProperty(hz, "host", {enumerable:false});

 

 

 

모든 속성 나열

 

Object.getOwnPropertyNames(object_name)

 


 

<p id="demo"></p>


<script>

var hz = {

  name : "홈짱닷컴",

  host : "Homzzang.com",

  open : 2012

};


// 속성 변경

Object.defineProperty(hz, "host", {enumerable:false});


// 모든 속성을 배열로 반환

var txt =  Object.getOwnPropertyNames(hz);


document.getElementById("demo").innerHTML = txt;

</script> 

 

결과보기 : name,host,open

 

 

열거 가능한 속성 나열

 

Object.keys(object_name)

 


 

<p id="demo"></p>


<script>

var hz = {

  name : "홈짱닷컴",

  host : "Homzzang.com",

  open : 2012

};


// 속성 변경

Object.defineProperty(hz, "host", {enumerable:false});


// 열거 가능 속성을 배열로 반환

var txt =  Object.keys(hz);


document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기: name,open

 

 

속성 추가

 

Object.defineProperty(object_name, "property_name", {value:"property_value"});

 


 

<p id="demo"></p>


<script>

var hz = {

  name : "홈짱닷컴",

  host : "Homzzang.com",

  open : 2012

};


// 속성 추가

Object.defineProperty(hz, "code", {value:"HTML CSS JS"})


document.getElementById("demo").innerHTML = hz.code;

</script>

 

결과보기: HTML CSS JS

 

 

getter・setter 추가

 

Object.defineProperty() 메서드 사용해 Getter 및 Setter 추가 가능.

 


 

<p id="demo"></p>


<script>

var hz = {name:"홈짱닷컴", host:"Homzzang.com"};


// getter 정의

Object.defineProperty(hz, "site", {

  get : function () {return this.name + " " + this.host;}

});


document.getElementById("demo").innerHTML = hz.site;

</script>


결과보기: 홈짱닷컴 Homzzang.com

 

 

카운터 예제

 

<p id="demo"></p>


<script>

// 객체 정의

var hz = {counter:0};


// Setter・Getter 정의

Object.defineProperty(hz, "reset", {

  get : function () {this.counter = 0;}

});

Object.defineProperty(hz, "increment", {

  get : function () {this.counter++;}

});

Object.defineProperty(hz, "decrement", {

  get : function () {this.counter--;}

});

Object.defineProperty(hz, "add", {

  set : function (value) {this.counter += value;}

});

Object.defineProperty(hz, "subtract", {

  set : function (value) {this.counter -= value;}

});


// 카운터 작동

hz.reset;

hz.add = 5;

hz.subtract = 1;

hz.increment;

hz.decrement;

document.getElementById("demo").innerHTML = hz.counter;

</script> 

 

결과보기: 4


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Math JS - Math.min() 메서드 ★ - 최소값 (= 최솟값 = Math.min메서드 = 매스민메서드)
Math JS - Math.pow() 메서드 ★ - 승수 (= 거듭제곱 = pow메서드 = 매스포우메서드/매스파워메서…
Math JS - Math.random() 메서드 ★ - 랜덤값 (= 임의값 = Math.random메서드 = 매스랜…
Math JS - Math.round() 메서드 ★ - 반올림 (= 라운드)
Math JS - Math.sin() 메서드 - 사인값
Math JS - Math.sqrt() 메서드 - 제곱근
Math JS - Math.tan() 메서드 - 탄젠트값
Date JS - Date 객체 - 날짜객체 (속성 + 메서드) 종류 ※Date()함수 = Date함수 = 데이트 함…
Date JS - constructor 속성 - 객체생성자함수 (날짜 경우)
Date JS - prototype 속성(날짜) - 사용자정의 속성/메서드 추가 (날짜객체경우 = 프로토타입)
Date JS - getDate() 메서드 ★ - 일자 얻기 (= getDate메서드 = 겟데이트)
Date JS - getDay() 메서드 - 요일 얻기 (예: 4) (= 요일 추출 = 요일 표시 = getDay메서…
Date JS - getFullYear() 메서드 - 년도 (= 4자리 전체년도얻기 = 겟풀이어)
Date JS - getHours() 메서드 - 시 (= 시얻기 = 시간얻기)
Date JS - getMilliseconds() 메서드 - 밀리초 (= 밀리세컨드)
Date JS - getMinutes() 메서드 - 분 (= 분얻기)
Date JS - getMonth() 메서드 - 월얻기 (= 달얻기 = 달월얻기 = getMonth메서드 = 겟먼스메…
Date JS - getSeconds() 메서드 - 초 얻기 (= 겟세컨즈메서드)
Date JS - getTime() 메서드 ★ - 시간 얻기 (= 타임스탬프얻기 = getTime메서드 = 겟타임메서…
Date JS - getTimezoneOffset() 메서드 - UTC시간과의 시차
11/67
목록
찾아주셔서 감사합니다. Since 2012