본문 바로가기

HTML/Javascript 기초

[Javascript] 자바스크립트 클래스 생성하기

자바스크립트에서도 클래스를 선언할 수 있다.

클래스라는 명령어가 없이 function 안에 function들을 선언하면 된다.

<!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>
    <script type="text/javascript">
        // 클래스 정의 : function 타입
        function Calculator() {
            this.add = function (a, b) {
                console.log("두 수의 합은 ", (a + b));
            }
            this.subtract = function (a, b) {
                console.log("두 수의 차는 ", (a - b));
            }
            this.multiply = function (a, b) {
                console.log("두 수의 곱은 ", (a * b));
            }
            this.dvide = function (a, b) {
                console.log("두 수의 나눈 값은 ", (a / b));
            }
        }

        //  function 타입의 클래스 객체 생성
        var cal1 = new Calculator();

        cal1.add(100, 300);
        cal1.multiply(4, 3);

        // 일반적인 클래스의 기본 문법
        /*class MyClass(){
            생상자
            constructor(){
    
            }
    
            여러 메서드들 정의
            method1(){...}
            method2(){...}
        }*/

        class User {
            constructor(name) {
                this.name = name;
            }

            priontHello() {
                alert("안녕! " + this.name)
            }

            // getter
            get name() {
                return this._name;
            }

            // setter
            set name(value){
                this._name = value;
            }
        }

        // 클래스 객체 생성 방법
        let user = new User("홍길동");
        user.priontHello();

        alert(user.name); // getter 호출

        user.name = "장영실"; // setter 호출
        alert(user.name);
    </script>
</body>

</html>

 

 

728x90
반응형