캡슐화는 객체의 요소들을 숨기는 기능으로
getter와 setter로 값을 불러온다.
또한 js에서 상속하는 방법은
this.base 참조를 통해서 본인에게 다른 클래스를 상속하는 방법을
다음 예제로 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
height: 150px;
background: lightgray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>캡슐화와 상속</h1>
<h3>캡슐화</h3>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function GirlGroup(gn, mc, m) {
// 속성 초기화
var groupName = gn;
var memberCount = mc;
var members = m;
// setter getter
this.getGroupName = function() {
return groupName;
}
this.getMemberCount = function() {
return memberCount;
}
this.getMembers = function() {
return members;
}
this.setGroupName = function(gn) {
this.groupName = gn;
}
this.setMemberCount = function(mc) {
if(members.length != mc){
throw "멤버 수가 틀립니다. 다시 확인하세요!";
}else {
memberCount = mc;
}
}
this.setMembers = function(m) {
this.members = m;
}
}
function test1() {
var gn = "소녀시대";
var mc = 9;
var m = ["윤아", "써니", "태연", "서현", "티파니", "효연", "유리", "제시카", "수영"];
var girlsGeneration = new GirlGroup(gn, mc, m);
console.log(girlsGeneration);
console.log(girlsGeneration.groupName);
girlsGeneration.groupName = "방탄소년단";
console.log(girlsGeneration.groupName);
console.log(girlsGeneration.getGroupName());
//girlsGeneration.setMemberCount(8);
var area1 = document.getElementById("area1");
with(girlsGeneration){
area1.innerHTML += "그룹 : " + getGroupName() + "<br>";
area1.innerHTML += "멤버수 : " + getMemberCount() + "<br>";
area1.innerHTML += "멤버 : " + getMembers() + "<br>";
}
}
</script>
<hr>
<h3>상속</h3>
<button onclick="test2();">실행확인</button>
<script type="text/javascript">
function Book(t, p, dr) {
var title = t;
var price = p;
var discountRate = dr;
this.getTitle = function() {
return title;
}
this.getPrice = function() {
return price;
}
this.getDiscountRate = function() {
return discountRate;
}
this.setTitle = function(t) {
title = t;
}
this.setPrice = function(p) {
if (p < 0) {
throw "가격이 어떻게 마이너스냐? 사면 돈주냐?";
}else {
price = p;
}
}
this.setDiscountRate = function(dr) {
if (t < 0) {
throw "할인율이 마이너스면 말이 되냐?";
} else {
discountRate = dr;
}
}
}
// 객체들이 공유하는 prototype에 판매 가격을 구하는 메소드 추가
Book.prototype.getSellPrice = function() {
return this.getPrice() - (this.getPrice() * this.getDiscountRate());
}
function test2() {
var book1 = new Book('자바의 정석', 35000, 0.15);
alert("title : " + book1.getTitle() + "\n"
+ "sellPrice : " + book1.getSellPrice())
}
</script>
<br>
<button onclick="test3();">상속 확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function Novel(t, p, dr, tp) {
this.base = Book;
this.base(t, p, dr);
// Book을 상속, 생성자 전달
var type = tp;
this.getType = function() {
return type;
}
this.setType = function(tp) {
type = tp;
}
}
Novel.prototype = Book.prototype;
function test3() {
var novel = new Novel("나무", 30000, 0.2, '소설');
alert("title : " + novel.getTitle() + "\n"
+ "sellPrice : " + novel.getSellPrice());
var area2 = document.getElementById("area2");
area2.innerHTML += "novel instanceof Novel : " + (novel instanceof Novel) + "<br>";
area2.innerHTML += "novel instanceof Book : " + (novel instanceof Book) + "<br>";
console.log(novel);
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-018.DOM(Document Object Model), getElementById, createElement, createTextNode, appendChild, 속성 지정 및 추가, querySelector (0) | 2018.11.15 |
|---|---|
| [JS]04-017.JS의 지오 로케이션(위치 정보, getCurrentPosition()) (0) | 2018.11.15 |
| [JS]04-015.JS의 객체 관련 키워드(instanceof 키워드, new와 {} 생성의 차이점) (0) | 2018.11.14 |
| [JS]04-014.JS의 객체 배열과 생성자 함수 (0) | 2018.11.14 |
| [JS]04-013.JS의 객체 사용 방법 (0) | 2018.11.13 |