클래스 정리 (기본)

자바 스크립트 클래스 정리

 

선언

 

 

1. 클래스 선언

class TempClass{
	... 내용
}

 말 그대로 클래스를 선언하는 것.

 

변수를 선언하듯이 클래스를 선언 해 주면 된다.

 

 

2. 클래스 표현 식

 

const temp = class TempClass{
	... 내용
}

 

1, 2번 방식 둘다 호이스팅 ( 선언들을 최상단으로 끌어 올리는 것 ) 되지 않으므로, 선언 하기 전에 접근할 수 없음을 기억해야 한다.

 

생성자

 

constructor를 통해 처음에 값을 세팅 할 수 있다.

 

보통 생성자는 클래스의 이름과 같게 설정 하였지만, 자바스크립트에서는 constructor로만 설정 해야 한다.

 

객체 선언 시 자동으로 생성자를 호출하게 된다.

 

---

정적 메서드

 

일반 적으로 클래스 속 메서드는 클래스를 객체화 한 다음, 해당 객체에서 접근할 수 있다.

 

하지만 정적 메서드는 그렇지 않다.

 

정적 메서드는 static을 붙여 설정할 수 있으며, 클래스에서 바로 접근할 수 있게 된다.

 

class TempClass{
    constructor(a,b){
        this.a = a;
        this.b = b;
    }

    static info(){
        console.log("this is static function");
    }

    infoTo(){
        console.log("a is",this.a," b is",this.b);
    }
}

const temp = new TempClass(1,3);

// temp.info(); ---- 1

TempClass.info(); ---- 2

temp.infoTo(); ---- 3

 

결과

Uncaught TypeError TypeError: temp.info is not a function

this is static function

a is 1  b is 3

1번의 결과는 정적 메서드를 객체에서 접근하였기 때문에 에러가 발생하였다.

 

정적 메서드는 클래스에서 접근이 가능하다.

 

---

클래스 상속

 

자바 스크립트에서 클래스 상속은 extends를 통해 상속이 가능하다.

 

단, 부모 클래스와 자식 클래스에서 동일한 변수를 받아 사용하는 경우가 있을 텐데 이 경우는 super()를 사용 해 주어야 한다.

 

예를 들면

 

class TempClass{
    constructor(a,b){
        this.a = a;
        this.b = b;
    }

    static info(){
        console.log("this is static function");
    }

    infoTo(){
        console.log("a is",this.a," b is",this.b);
    }
}

class TempChildClass extends TempClass{
    constructor(a, b, c){
    	this.a = a;
        this.b = b;
        this.c = c;
    }
}

const tempChild = new TempChildClass(3, 4, 5);

console.log(tempChild.c);

이렇게 TempClass를 상속 받는 TempChildClass가 있다고 하자.

 

TempChildClass는 TempClass에서 받는 a, b와 함께,  c도 받아 사용하게 된다.

 

하지만 저렇게만 하면 아래와 같은 에러가 발생하게 된다.

 

Uncaught ReferenceError ReferenceError: 
Must call super constructor in derived class before accessing 'this' or returning from derived constructor

super()를 사용하라는 것이다.

 

자식 클래스를 수정하게 되면 아래와 같다.

class TempChildClass extends TempClass{
    constructor(a, b, c){
        super(a,b);
        this.c = c;
    }
}

부모 클래스에서 이미 받는 a와 b는 부모에게서 가져오게 되는 것이다.

 

그렇다면 아래와 같이 사용하면 어떻게 될까?

 

class TempChildClass extends TempClass{
    constructor(c){
        this.c = c;
    }
}

super를 사용하지 않아도 될까?

 

아니다. 사용해야 한다.

 

class TempChildClass extends TempClass{
    constructor(c){
        super();
        this.c = c;
    }
}

자식에게서는 부모에게 받은 a와 b가 필요 없다고 해도 super를 빈 상태로 사용 해 주어야 한다.