[JavaScript] #4. 클래스

JavaScript의 클래스에 대해서 작성해본다.

 

 

 

1. 클래스

 

클래스는 일종의 템플릿이고, 클래스를 통해 객체를 생성한다.

 

예를 들자면, 붕어빵 틀을 통해 팥붕어빵, 크림붕어빵 등등을 찍어낼 수 있는데, 여기서 붕어빵 틀을 클래스, 붕어빵을 객체라고 생각하면 된다.

 

클래스는 생성자, 메서드(함수)로 이루어질 수 있다.

 

여기서 생성자는 클래스의 변수에 값을 할당해주는 함수로

constructor(변수){ this.변수 = 변수 } 라고 작성한다.

 

 

여기서 클래스는 Person, 객체는 p1이다.

 

new를 통해 클래스 Person의 객체 p1을 생성할 때, 클래스의 변수에 할당해주고 싶은 값을 매개변수로 넣으면 생성자를 통해서 p1.name='bearbrick, p1.age='10'이 할당된다.

 

 

 

2. get, set

 

위처럼 생성자만 있는 경우에는 어떠한 값이든 변수에 할당할 수 있다. 가령 age = -10 처럼 말이다. 하지만 age에 음수가 들어와서는 안된다. 이처럼 값을 안정적으로 세팅하고 리턴할 때 필요한 것이 get, set이다.

 

get, set은 객체가 생성될 때 사용되어지는데,

get은 값을 return할 때, set은 값을 세팅할 때 사용된다.

 

get, set을 사용할 때 주의해야할 것은 this.변수 가 아닌 this._변수 라고 작성해야한다.

 

this.변수 라고 작성한다면 생성자에서 get, set을 호출하게 되면서 무한 호출에 빠지게 되어 에러가 발생한다.

잘이해가 안가더라도 어찌되었든 에러가 발생하기 때문에 this._변수를 사용해야한다고 기억하자.

 

 

age에 음수가 들어오는 것을 막기 위해서 set을 통해 안정적인 값만 들어오게 만들었다.

 

new를 통해 age에 -10이 할당되도록 했더니, set의 if문 조건에 걸려 -10이 age에 세팅되지 못하고 error를 출력하게된다.

 

 

 

3. public vs private

 

public:

외부 어디에서든 사용 가능

앞에 아무것도 붙지 않으면 public이다.

 

private:

클래스 내에서만 사용 가능

앞에 #을 붙이면 private이 된다.

 

 

 

4. static

 

static은 객체마다 할당되는 것이 아닌 클래스 자체에 할당되는 것으로,

객체와 상관없이 공통적으로 사용하는 것이 있다면 static을 사용한다.

 

 

이 때 주의해야할 것은 static 변수는 객체로 접근할 수 없고, 클래스로 접근할 수 있다.

 

따라서 fruit.a 와 같이 객체로 접근했을 때는 undefined가 출력되고, Apple.a와 같이 클래스로 접근했을 때는 apple이 정상적적으로 출력된 것을 확인할 수 있다.

 

 

 

5. 상속

상속은 특정 클래스의 기능을 가져다 쓰고 싶을 때 사용한다.  

상속하고 싶은 클래스가 있다면 상속받을 클래스(자식) extends 상속할 클래스(부모) 형식으로 작성하면 된다.

 

 

위처럼 작성한다면, Circle 클래스는 Shape 클래스를 상속받았기 때문에 Shape 클래스의 기능을 사용할 수 있다.

 

 

 

6. 오버라이딩 (재정의)

 

오버라이딩은 상속을 받는 데 그 중 기능을 수정하고 싶을 때 사용한다.

 

 

Triangle 클래스에서 getArea()함수를 오버라이딩으로 작성했다.

 

하지만 이렇게 되면 부모의 getArea()함수를 사용할 수 없게 된다.

 

이렇듯 오버라이딩을 했지만 부모의 함수를 호출하고 싶을 때는 super을 사용한다.

 

super.getArea() 라고 작성하면 Triangle 클래스가 아닌 Shape 클래스의 getArea()함수를 사용할 수 있다.

 

 

 

7. instanceof

 

A instanceof B:

A객체가 B클래스의 객체인지 아닌지를 판별한다. 해당 클래스의 객체가 맞다면 true를, 아니라면 false를 반환한다.

 

 

두번째 console.log()를 보면, 상속된 클래스도 해당 클래스의 객체가 맞다고 판별함을 알 수 있다.

또한 세번째 console.log()를 보면, JavaScript의 모든 객체는 Object 클래스를 상속받기 때문에 true를 출력한다.