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

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