1. 설명
객체 만드는 방법 3가지
- 리터럴 객체만들기
- 중괄호("{}")를 사용하여 객체 property와 method 추가한다.
- 가장 많이 사용한다.
- new Object 객체만들기
- new Object()로 빈객체 생성한다.
- 빈객체에 property 추가한다.
- 빈객체에 method 추가한다.
- prototype으로 객체 만들기
- 객체의 틀을 만든다.(Java에서 클래스와 같다.)
- 하나의 프로토타입으로 여러 객체를 생성할 수 있다는 장점이 있다.
2. 코드
2-1. 리터럴 객체
<script>
//리터럴 객체만들기
const literalObj = {
//property
name: "홍길동",
code: 111,
ammount: 35000,
//method
deposit: function(money){
return this.ammount += money;
},
withdraw: function(money){
return this.ammount -= money;
},
inquiry: function(){
return this.ammount;
}
}
</script>2-2. new Object
<script>
//new Object 객체만들기
const obj = new Object();
//property
obj.name = "Honggildong";
obj.code = 123;
obj.ammount = 20000;
//method
obj.deposit = function(money){
return this.ammount += money;
}
obj.withdraw = function(money){
return this.ammount -= money;
}
obj.inquiry = function(){
return this.ammount;
}
</script>2-3. prototype 객체
<script>
//prototype으로 객체만들기
function Bank(name, code, ammount){
//property
this.name = name;
this.code = code;
this.ammount = ammount;
//method
this.deposit = function(money){
this.ammount += money;
}
this.withdraw = function(money){
this.ammount -= money;
}
this.inquiry = function(){
return this.ammount;
}
}
</script>2-4. 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>new Object()로 사용자 객체만들기, 리터럴객체로 사용자 객체만들기</h1>
<hr>
<script>
//출력
//new Object 객체
document.write(`name = ${obj.name} code = ${obj.code} ammount = ${obj.ammount}<br>`);
document.write(`deposit(1000) = ${obj.deposit(1000)}<br>`);
document.write(`withdraw(1000) = ${obj.withdraw(1000)}<br>`);
document.write(`inquiry = ${obj.inquiry}`);
document.write(`<hr>`);
//리터럴 객체
document.write(`name = ${literalObj.name} code = ${literalObj.code} ammount = ${literalObj.ammount}<br>`);
document.write(`deposit(1000) = ${literalObj.deposit(1000)}<br>`);
document.write(`withdraw(1000) = ${literalObj.withdraw(1000)}<br>`);
document.write(`inquiry = ${literalObj.inquiry}`);
document.write(`<hr>`);
//prototype으로 객체1
const bank1 = new Bank("gildong", 2345, 40000);
document.write(`name = ${bank1.name} code = ${bank1.code} ammount = ${bank1.ammount}<br>`);
document.write(`deposit(1000) = ${bank1.deposit(1000)}<br>`);
document.write(`withdraw(1000) = ${bank1.withdraw(1000)}<br>`);
document.write(`inquiry = ${bank1.inquiry}`);
document.write(`<hr>`);
//prototype으로 객체2
const bank2 = new Bank("hgd", 7890, 50000);
document.write(`name = ${bank2.name} code = ${bank2.code} ammount = ${bank2.ammount}<br>`);
document.write(`deposit(1000) = ${bank2.deposit(1000)}<br>`);
document.write(`withdraw(1000) = ${bank2.withdraw(1000)}<br>`);
document.write(`inquiry = ${bank2.inquiry}`);
</script>
</body>
</html>
