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