15. 클래스

2024. 11. 2. 15:09자바스크립트(Javascript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클래스</title>
</head>
<body>
    <script>
        //클래스를 이용한 객체 생성
        const Student = class {
            //private
            #name    
            #hp

            // static 정적 프러퍼티 및 메서드를 생성
            static count_student =100
            static makeStudent(){
                return new Student(`반하나`, `010-2222-2222`, 25)
            }
            constructor(name, hp, age){
                this.#name = name
                this.#hp = hp
                this.age = age
            }
            getName= () => {
                return `이름은 ${this.name} 입니다.`
            }

            set name(value){
                console.log(`set`, value)     // 10. set 사과킴
                this.#name = value;
            }
            set hp(value){
                console.log(`set`, value)
                this.#hp = value;
            }

            get name(){
                console.log(`get 호출`)   // 2. 4. 8, 11번 (get 호출)
                return this.#name
            }
            get hp(){
                return this.#hp
            }


        }
        const apple = new Student(`김사과`, `010-1111-1111`, 20)
        console.log(apple)            
        // 1.
        //  Student {age: 20, #name: '김사과', #hp: '010-1111-1111', getName: ƒ}
        console.log(apple.name)       // 3. 김사과
        console.log(apple.getName())  // 5. 이름은 김사과 입니다.
        console.log(`--------`)

        console.log(Student.count_student);   //6. 100
        const banana = Student.makeStudent()
        console.log(banana)                 
        // 7. Student {age: 25, #name: '반하나', #hp: '010-2222-2222', getName: ƒ}
        console.log(`--------`)
        
        //get 프러퍼티가 실행
        console.log(apple.name)  // 9. 김사과
        //set 프러퍼티가 실행
        apple.name = `사과킴`
        //get 프러퍼티가 실행
        console.log(apple.name)    // 12. 사과킴

        /*
            과제
            카운터 만들기
            카운터를 0으로 초기화 한뒤 하나씩 값이 증가, 하나씩 값이 감소하는 메서드를 구현한 클래스를 만들어보자
            (단, 객체 생성시 전달한 값이 0보다 작을 결루 0으로 초기화 시키고 그 외의 값은 
            입력한 값으로 설정,. 또한 프러퍼티에 값을 직접 불러오거나 설정할 수 없으며 메서드를 통해 설정하거나 불러옴)
            
            예)
            const count = newCounter(10)  //10
            count.increment()  // 11
            count.decrement()  // 10

            const count = new Counter(-1) //10
            count.increment() // 1
            count.decrement() // 0
        */
        
    </script>
</body>
</html>
728x90
LIST

'자바스크립트(Javascript)' 카테고리의 다른 글

17. Math 객체  (0) 2024.11.04
16. 프로토타입  (10) 2024.11.04
14. 객체  (0) 2024.11.02
13. 화살표 함수  (0) 2024.11.02
12. 함수  (0) 2024.11.02