[javascrip 기본] javascript의 class, 생성자 , method

다른 언어들과 같이 javascript에도 클래스가 존재한다.

 

상속, 함수 재정의, get / set 함수 등 다른 객체지향 언어의 클래스의 특성과 비슷하면서도

return값을 정의하지않는등 javascript 언어자체의 특성에 따라 살짝씩 다른점이 있는 클래스에 대해 알아보자

 

 

- class 

class는 어떤 물체의 행동과 특성을 정의하여 객체화 시킨것이다. 이름, 나이 등등 물체의 특성은 field로, 동작은 method로 만든다.

 

1번 코드처럼 클래스를 정의하고

2번 코드처럼 생성자를 이용해 변수를 메모리에 할당하게 된다.

 

 

 

 

 

 

 

 

 

 

 

- constructor ( 생성자 )

 

먼저 생성자이다. 다른 객체지향 언어처럼 this. 를 통해 자신에 대해 참조할수 있다.

 

이처럼 생성자 함수의 매개변수로 전달한 값이 bird.name 에 할당되었다.

 

 

 

 

 

 

 

 

 

 

- method 

메소드는 해당 클래스가 사용하는 함수이다. 만약 동물이 울음소리를 내는 메소드를 만들고 싶다고하면

다음과같이 loud()함수를 정의할수 있다. javascript에서는 함수에 리턴값을 명시하지 않기 때문에 함수이름만 가지고 함수를 선언할수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

- getter, setter 함수

getter setter 함수는 클래스의 필드를 변경하고, 접근할수 있게 해주는 함수이다.

javascript에서는 get, set으로 정의한다. 만약 동물의 나이에대한 get,set함수를 만든다면

처럼 정의할수 있겠다.

 

정의 방법은 정의하고싶은 get,set 변수에대해

get 변수명() / set 변수명(파라미터) 로 정의하면된다.

 

 

 

- get, set 사용시 주의할점

 

그런데 위와같이 get,set 메소드를 정의하고 bird1.age를 변경하려고 하면 이러한 에러가 난다!

 

이러한 이유는 get, set함수는

 

정의하는 순간 대입연산이 set함수로 대체되고 , 변수에 접근하려고 할떄 get함수로 대체되기 떄문이다.

 

무슨말이냐면

 

 

1. 먼저 bird1 객체의 age에 3을 할당하며, set age()함수가 실행된다.

2. set age()함수 실행과 동시에 this.age = value; 가 실행되고, 이는 다시 set age()함수를 부른다.

3. set age() 함수가 또 실행되어 또 this.age = value; 가 실행되어 또 set age()함수를 부른다.

4. 이 과정이 무한 반복된다.

 

이러한 과정이 반복됨에 따라, 함수가 계속 재귀(recursion)되어 call stack 이 폭팔해버리고, 에러가 나게 되는것이다.

 

get 함수 또한 위와 비슷한 방식으로 에러가 나며 ,

 

 

따라서 get,set 함수에서 get,set함수를 정의할때는 변수명을 다르게 적어야한다. 보통은 변수명에 언더바 _ 를 붙인다.

 

 

 

 

 

 

 

 

- static

static 은 클래스로 해당 클래스에 속하는 객체들이 고유하게 가지고있는 정보를 바탕으로 만드는 변수 / 함수이다.

다음과 같이 사용하며,

할당된 객체에대해 static 변수에 접근하려고 하면 undefined라고 나오고

함수사용시 에러가 나고, 위와같이 클래스자체에 대해 접근해야한다.

 

 

 

 

 

- 상속과 다양성

자바스크립트역시 클래스에 대해 상속과 함수 재정의가 가능하다.

 

예시를 보면 shape클래스를 Rectangle가 상속받아 단지 선언을 했을뿐인데, 부모 클래스의 메소드인 draw함수와 getArea() 함수를 실행하는것을 볼수있다.

 

 

- 상속후 overiding(재정의)

부모 메소드의 재정의 또한 비슷한 형식이다. 

 

이처럼 부모의 draw() , getArea() 함수가 아닌 재정의된 함수로 실행되는것을 볼수있다.

 

 

 

 

 

- Super

메소드 재정의시에 부모 클래스의 메소드도 실행하고, 재정의한 함수또한 실행시키게 하려면 super를 사용하면 된다.

super 는 부모 클래스의 메소드를 호출할수 있게한다.

 

예시를 보면 super.draw() 를 통해 부모의 draw()함수를 실행한후, 재정의할 함수가 실행되는것을 확인할수 있다.