본문 바로가기
웹프로그래밍/웹프로그래밍수업

(33)명품 웹프로그래밍_7장_코어객체와 객체 생성_2

by 코잼민 2024. 10. 20.

# 범위 

  • 프로토타입 객체의 정의
  • 프로토타입 객체 생성 방법1 : new Object()
  • 프로토타입 객체 생성 방법2 : 리터럴 표기법
  • 프로토타입 객체 생성 방법3 : 생성자 메소드

# 노트 :

로토타입 객체의 정의 , 로토타입 객체 생성 방법1 : new Object()

 로토타입 객체 생성 방법2 : 리터럴 표기법

 로토타입 객체 생성 방법3 : 생성자 메소드

● 연습_방법1,2,3으로 account 객체 만들기

○ 요약 :

※ 이건 요약을 하는 것보다, 코드로 기억을 떠올리는 것이 좋을 것 같다.

프로토타입 생성 방법1_ new Object()  :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Account객체 만들기</title>
  <script>
    let account = new Object();
 
    account.owner = "황기태";
    account.code = "111";
    account.balance = 35000;
 
    account.inquiry = function(){
      return this.balance;
    }
    account.deposit = function(cash){
      this.balance +=cash;
    }
    account.withdraw = function(cash){
      this.balance -=cash;
    }
  </script>
</head>
<body>
  <script>
    document.write("account : "
    +account["owner"]+","
    +account["code"]+","
    +account["balance"]
    +"<br>");
 
    account.deposit(10000);
    document.write(
      "10000원 저금 후 잔액은 "
      +account["balance"]
      +"<br>"
    );
    
    
    account.withdraw(5000);
    document.write(
      "5000원 인출 후 잔액은 "
      +account["balance"]
      +"<br>"
    );
  </script>
 
</body>
 
</html>
cs

프로토타입 생성 방법2_ 리터럴 표기법 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Account객체 만들기</title>
  <script>
    let account = {
 
      owner : "황기태",
      code : "111",
      balance : 35000,
 
      inquiry : function()
      {
        return this.balance;
      },
 
      deposit : function(cash)
      {
        this.balance +=cash;
      },
      
      withdraw : function(cash)
      {
        this.balance -=cash;
 
      }
    };
  </script>
</head>
<body>
 
  <script>
    document.write(
      "acccount : "
      +account.owner+", "
      +account.code+", "
      +account.balance
      +"<br>"
    )
    account.deposit(10000);
    
    document.write(
      "10000원 저금 후 잔액은 "
      +account.inquiry()
      +"<br>"
    )
    account.withdraw(5000);
    
    document.write(
      "5000원 저금 후 잔액은 "
      +account.inquiry()
      +"<br>"
    )
 
 
  </script>
 
 
</body>
 
</html>
cs

프로토타입 생성 방법3_ 생성자 메소드 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Account객체 만들기</title>
  <script>
    function Account(name, code, balance) {
      this.owner = name;
      this.code = code;
      this.balance = balance;
 
      this.inquiry = function () {
        return this.balance;
      };
      this.deposit = function (cash) {
        this.balance += cash;
      };
      this.withdraw = function (cash) {
        this.balance -= cash;
      };
    }
  </script>
</head>
 
<body>
  <script>
    let account1 = new Account("황키태""111",35000);
 
    document.write("account : "
     + account1.owner + ","
     + account1.code + ","
     + account1.balance+"<br>"
    );
    
    account1.deposit(10000);
    
    document.write("10000원 저금 후 잔액은 "
    +account1.inquiry()+"<br>"
    );
    
    account1.withdraw(5000);
    
    document.write("5000원 인출 후 잔액은 "
    +account1.inquiry()+"<br>"
    );
 
 
 
  </script>
</body>
 
</html>
cs