[자바스크립트] class 개념/사용법 (getter와 setter)

안녕하세요 오늘은 자바스크립트 class에 대해 알아보겠습니다.

 

class란?

class는 오브젝트를 만들수있게 도와주는 템플릿이라고 말할수있습니다.

이것은 ES6에 새로 추가되었습니다.

 

class 사용법

기본 class를 만들려면 다음과 같이 해야합니다.

우선 클래스를 만들면 constructor는 거의 필수적으로 사용됩니다. 이게 무슨 말이냐면

클래스를 사용할때 인자를 받을것이 있다면 constructor를 사용해야 합니다.

 

그니까 예를 들면 사람을 소개해 주는 class에서 사람의 나이, 키, 성별등을 받아야 되는데

이런걸 받고 싶으면 constructor를 사용하는것 입니다. 그리고 저기 this는 무엇이냐면

this는 자기 자신 다른말로 자기 객체를 가리키는것 입니다.

 

this에 대한 설명을 한번만 더해보면

이제 console창을 한번 확인해 보겠습니다.

이런식으로 자기 자신인 객체가 보여지는것을 알수있습니다.

그럼 this.age 하면 객체있는 age를 가리키는거와 같다고 볼수있습니다.

 

getter 와 setter

getter와 setter는 일종에 메서드 입니다.

getter는 객체에 있는 포로퍼티(속성)을 반환하는 역활을 하고, setter는 getter로 받아온그것을 

설정하고 변경하는 역활을 합니다.

저희에게 이런 코드가 있다고 상상해봅시다. 이 class의 역활은 firstname과 lastname, age를 받아서

알려주는 역활을 합니다. 근데 저희는 나이가 0 미만이 되면 안됩니다. 이렇게 값의 범위를 설정할때

getter와 setter를 사용하기도 합니다.

이건 gettter와 setter를 사용해서 만든 것입니다. 이제 한번 실행을 해보겠습니다.

하지만 이런식으로 콜 스택 사이즈가 끝났다고 말합니다.

이 이유를 한번 살펴 보면, getter에서 this.age를 반환합니다. 그러면 그 this.age가 set으로 넘어가서 value에 할당되겠지요

근데 그 this.age를 알려고 다시 get을 호출합니다. 이제 그것들이 반복 되면서 콜스택이 끝난것 입니다.

 

이걸 고칠려면 저희는 getter와 setter에서 쓰는 변수명을 조금 바꾸어야 됩니다.

저희는 이런식으로 getter와 setter에서 사용하는 변수명에  " _ " 를 붙어서 대부분 나타냅니다.

 

static

static은 class를 쓸때 꼭 필요한 값을 일일이 만들지 말고 한번에 만들어주는것 입니다.

그니까 이게 무슨 말이냐면, 저희가 클래스로 오브젝트를 만들때 오브젝트에 상관 없이

꼭 필요한 값이 있습니다. 그럴때 사용하는것이 static 입니다.

 

이런식으로 static을 이용하면 객체의 이름에 .hello()를 하는게 아닌, 클래스 이름에 .hello()를

해야 합니다. 

 

상속과 다양성

상속은 한마디로 부모가 자식한테 물려주는것 과 같다고 볼수있습니다.

이게 무슨 말이냐면, 부모 클래스를 만들고 나서는 그 부모클래스를 상속 받는 자식클래스를

만들수있다는 이야기 입니다. 

위 사진 처럼 부모 클래스에서 자식 클래스로 상속을 할수있습니다.

바로 예제로 설명 해보겠습니다.

우선 부모 클래스인 shape 클래스를 만들어 주었습니다.

그다음 shape 클래스를 상속 받는 클래스인 rectengle과 triangle 클래스를 만들었습니다.

근데 저희는 rectengle 클래스에 아무것도 추가하지 않았습니다.

 

한번 다시 설명해보면, 부모 클래스에 있는 모든 코드가 자식 클래스 밑으로 간다는것입니다.

하지만 자식클래스는 다양성을 통해 그것을 수정하고, 추가하고 삭재 할수있습니다.

 

위 클래스인 triangle은 다양성을 이용하였습니다.

왜냐하면 부모 클래스에 있는 getarea를 변경하였기 때문입니다.