[javascript] Class

javascript class

자바스크립트에서 클래스 사용은 ES6에서부터 지원을 하기 시작했다.

익스플로러에서는 해당 코드 사용이 불가능하나, 최신 브라우저를 이용할 경우 class를 지원한다.

class 생성하기

class를 선언하여 class 생성하기

<script>
	class Person {
    
    }
    
    let yong = new Person();
    console.log(yong); 
</script>

class 초기 값 설정

Constructor(생성자)를 사용하여 class 초기 값을 설정한다.

class 내부에서 Constructor는 한 개만 존재할 수 있으며, 2번 이상 사용 시 Syntax Error가 발생할 수 있다.

<script>
	class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
}

let yong = new Person('yong','24','busan');
console.log(yong);
</script>

class 메서드 사용

class에 설정한 초기값에 접근해서 특정 기능을 하는 메서드를 만들 수 있다.

<script>
	class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //메서드생성
    moveCity() {
        return this.city = "seoul";
    }
}

let yong = new Person('yong','24','busan');
console.log(yong.moveCity();
</script>

class의 상속

extends를 이용하여 class 상속 개념을 이용할 수 있다.

<script>
	class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //메서드생성
    moveCity() {
        return this.city = "seoul";
    }
}
    class introducePerson extends Person {
        introduce () {
            return `${this.city}에 사는 ${this.name}입니다.`;
        }
    }
let yong = new introducePerson('yong','24','busan');
console.log(yong.introduce());

</script>

super를 이용해서 부모가 가지고 있는 메서드 호출하기

super 기능을 이용해서 자식 class에서 부모 메서드를 호출할 수도 있다.

<script>
	class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //메서드생성
    moveCity() {
        return this.city = "seoul";
    }
}
    class introducePerson extends Person {
        constructor (name,age, city) {
            super(name, age, city);
        }
        introduce () {
            return `${this.city}에 사는 ${this.name}입니다.
                    저는 내년에${super.moveCity()}로 이사 갑니다.`;
        }
    }
let yong = new introducePerson('yong','24','busan');
console.log(yong.introduce());
</script>