예제 7-9. new Object()로 계좌를 표현하는 account 객체 만들기. 예제 7-10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기

WEB/JAVASCRIPT-CONCEPT 2017. 10. 30. 10:57 |

7. 사용자 객체 만들기


new Object()로 객체 만들기


* 사용자 객체 만들기

new Object()로 프로퍼티가 없는 빈 객체를 만들고 프로퍼티와 메소드를 추가하여 객체를 완성한다.

프로퍼티 추가 시 이름과 함께 값을 줘야한다.

ex)

var account = new Object();

account.owner = "황기태"; // 프로퍼티 owner 생성 및 초기화

account.code = "111"; // 프로퍼티 code 생성 및 초기화

account.balance = 35000; // 프로퍼티 balance 생성 및 초기화


* 사용자 객체의 프로퍼티 사용

ex)

var name = account["owner"]; // name = "황기태"

account["balance"] = 10000; // balance 프로퍼티에 값 10000 저장. 잔금 10000원

account.blalance += 20000; // balance 프로퍼티에 20000 더하기. 잔금 30000원


* 사용자 객체에 메소드 만들기

ex)

function deposit(money) // 메소드로 사용할 함수 작성

{

this.balance += money; // 객체(this)의 프로퍼티 balance에 money 더하기

}

account.deposit = deposit; // 메소드 deposit(money) 만들기 완성


account.deposit(1000); // deposit(1000)이 실행된다.


* this

앞의 deposit() 함수에서 this는 이 객체를 뜻하며, this.balance는 이 객체의 balance 프로퍼티를 뜻한다

만일 this 없이 balance라고만 쓰면 이것은 전역 변수나 지역 변수 balance를 접근하는 것이다.

그러므로 객체의 멤버 변수인 프로퍼티를 접근할 때는 반드시 this를 사용해야 한다.


예제 7-9. new Object()로 계좌를 표현하는 account 객체 만들기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new Object()로 사용자 객체 만들기</title>
<script>
    //메소드로 사용할 3 개의 함수 작성
    function inquiry() { return this.balance; } // 잔금 조회
    function deposit(money) { this.balance += money; } // money 만큼 저금
    function withdraw(money) { // 예금 인출, money는 인출하고자 하는 액수
        // money가 balance보다 작다고 가정
        this.balance -= money;
        return money;
    }
 
    // 사용자 객체 만들기
    var account  = new Object();
    account.owner = "황기태"; // 계좌 주인 프로퍼티 생성 및 초기화
    account.code = "111"; // 코드 프로퍼티 생성 및 초기화
    account.balance = 35000; // 잔액 프로퍼티 생성 및 초기화
    account.inquiry = inquiry; // 메소드 작성
    account.deposit = deposit; // 메소드 작성
    account.withdraw = withdraw; // 메소드 작성
</script>
</head>
<body>
<h3>new Object()로 사용자 객체 만들기</h3>
<hr>
<script>
    // 객체 활용
    document.write("account : ");
    document.write(account.owner + ", ");
    document.write(account.code + ", ");
    document.write(account.balance + "<br>");
 
    account.deposit(10000); // 10000원 저금
    document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
    account.withdraw(5000); // 5000원 인출
    document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>
cs

* 리터럴 표기법으로 객체 만들기

account 객체는 중괄호를 이용하여 프로퍼티와 메소드를 한 번에 작성할 수 있다. 이것을 리터럴 표기법이라고 한다.

이 방법은 가독성이 높다.


예제 7-10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리터럴 표기법으로 객체 만들기</title>
<script>
//사용자 객체 만들기
var account = {
    // 프로퍼티 생성 및 초기화
    owner : "황기태", // 계좌 주인
    code : "111", // 계좌 코드
    balance : 35000, // 잔액 프로퍼티
 
    // 메소드 작성
    inquiry : function () { return this.balance; }, // 잔금 조회
    deposit : function(money) { this.balance += money; }, // 저금. money 만큼 저금
    withdraw : function (money) { // 예금 인출, money는 인출하고자 하는 액수
        // money가 balance보다 작다고 가정
        this.balance -= money;
        return money;
    }
};
</script></head>
<body>
<h3>리터럴 표기법으로 사용자 객체 만들기</h3>
<hr>
<script>
    document.write("account : ");
    document.write(account.owner + ", ");
    document.write(account.code + ", ");
    document.write(account.balance + "<br>");
 
    account.deposit(10000); // 10000원 저금
    document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
    account.withdraw(5000); // 5000원 인출
    document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>
 
cs








저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 8-2. 자바스크립트로 <span>태그의 CSS3 스타일 동적 변경  (0) 2017.10.30
예제 8-1. DOM 객체의 구조 출력 : p 객체 사례  (0) 2017.10.30
예제 7-8. Math를 이용한 구구단 연습  (0) 2017.10.30
예제 7-7. string 객체의 메소드 활용  (0) 2017.10.28
예제 7-5. Date 객체 생성 및 활용. 예제 7-6 방문 시간에 따라 변하는 배경색 만들기  (0) 2017.10.28
Posted by 너래쟁이
:

티스토리툴바