[함수 방식] - 메서드로 객체 데이터에 접근
<p id="demo"></p>
<script>
var hz = {
name: "홈짱닷컴",
host : "Homzzang.com",
site : function() {
return this.name + " " + this.host;
}
};
document.getElementById("demo").innerHTML = hz.site();
</script>
결과보기: 홈짱닷컴 Homzzang.com
[getter 방식] - 속성으로 객체 데이터에 접근
※ 더 간단하고 나은 데이터품질 보증.
<p id="demo"></p>
<script>
var hz = {
name: "홈짱닷컴",
host : "Homzzang.com",
get site() {
return this.name + " " + this.host;
}
};
document.getElementById("demo").innerHTML = hz.site;
</script>
결과보기: 홈짱닷컴 Homzzang.com
1. 더 간단한 구문 제공.
2. 속성과 메소드에 대해 동일한 구문 허용.
3. 더 나은 데이터 품질 보장 가능.
4. 뒤에서 작업수행하는 데 유용.
[getter]
※ 값 반환 역할 하므로, return 명령어 필요 O.
<p id="demo"></p>
<script>
var hz = {
name: "홈짱닷컴",
host : "Homzzang.com",
open : 2012,
get domain() {
return this.host.toUpperCase();
}
};
document.getElementById("demo").innerHTML = hz.domain;
</script>
결과보기: HOMZZANG.COM
[setter]
※ 값 설정 역할하므로, return 명령어 필요 X.
<p id="demo"></p>
<script>
var hz = {
name: "홈짱닷컴",
host : "",
open : 2012,
set domain(value) {
this.host = value.toUpperCase();
}
};
hz.domain = "homzzang.com";
document.getElementById("demo").innerHTML = hz.host;
</script>
결과보기: HOMZZANG.COM
객체의 속성 정의 (= getter/setter 추가 가능) 역할 함.
[get/set 차이]
get
- 정의: 속성의 접근자로 사용할 함수. (cf. getter 없으면 undefined임.)
- 용법: 이 속성에 접근하면, 접근할 때 사용한 객체(상속으로 인해 속성의 주인 객체와 다를 수 있음)를 이 함수의 this로 설정하고, 매개변수 없이 호출한 뒤 그 반환 값을 이 속성의 값으로 취급.
- 기본값: undefined
set
- 정의: 속성의 설정자로 사용할 함수. (cf. setter 없으면 undefined임.)
- 용법: 이 속성에 값을 할당하면, 할당할 때 사용한 객체를 이 함수의 this로 설정하고, 한 개의 매개변수(할당 중인 값)로 호출.
- 기본값: undefined
PS. MDN Object.defineProperty() 예제 보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[구문]
Object.defineProperty(object_name, "property_name", {
get/set : function () {code to be executed} });
[예제]
<p id="demo"></p>
<script>
// object 정의
var hz = {counter : 0};
// getter 정의
Object.defineProperty(hz, "reset", { // 초기화
get : function () {this.counter = 0;}
});
Object.defineProperty(hz, "increment", { // 1 증가
get : function () {this.counter++;}
});
Object.defineProperty(hz, "decrement", { // 1 감소
get : function () {this.counter--;}
});
// setter 정의
Object.defineProperty(hz, "add", { // value 더하기
set : function (value) {this.counter += value;}
});
Object.defineProperty(hz, "subtract", { // value 빼기
set : function (value) {this.counter -= value;}
});
hz.reset; // 여기까지 0 (※ getter이므로 값 할당 필요 X)
hz.add = 5; // 여기까지 5 (※ setter이므로 값 할당 필요 O)
hz.subtract = 1; // 여기까지 4 (※ setter이므로 값 할당 필요 O)
hz.increment; // 여기까지 5 (※ getter이므로 값 할당 필요 X)
hz.decrement; // 여기까지 4 (※ getter이므로 값 할당 필요 X)
document.getElementById("demo").innerHTML = hz.counter; // 4
</script>
결과보기: 4
