[JS] 함수형 설계와 클래스형 설계

함수의 이름과 기능이 동일한 함수와 클래스를 설계하여 비교한다.

 

정의

클래스의 this는 자기자신을 가르키며 this.변수 는 자신의 클래스에 속하는 속성을 정의한다.

함수의 속성은 지역변수를 정의하여 사용한다.

또한 클래스의 첫 글자는 대문자로 적는다.

 

메소드

클래스의 메소드는 프로토타입 형태로 외부로 빼더라도 해당 메소드에 속하며 공간을 공유할 수 있다.

클래스 자기자신을 가르키는 this를 통해 클래스 내의 속성에 접근할 수 있다.

반면 함수는 자신에게 속하는 함수를 외부에 정의할 수 없어 함수 안에 중첩함수를 정의한다.

함수 내에 있으니 당연히 속성과 공간을 공유한다.

 

내부 접근

클래스 내의 모든것은 인스턴스 생성을 통해 접근이 가능하다.

함수내의 중첩함수는 함수 내에서 init()을 마지막에 호출해주는 것과 같이 

안에서 호출되지 않으면 밖에서 중첩함수를 호출하거나 접근하는 게 불가능하다.

이를 위해 접근을 원하는 함수는 return문을 통해 전달해야한다.

 

인스턴스 생성 또는 호출

클래스는 new를 통해 인스턴스를 생성하며 각각의 인스턴스에 새로운 공간이 만들어진다.

메소드의 경우엔 prototype을 사용시에 모든 인스턴스에서 공유가 되며 따로 공간을 차지하지 않는다.

함수의 경우에도 변수에 저장하는 형태로 first Class함수의 성질과

클로져기능을 통해 비슷한 형태의 기능을 구현할 수 있다.

각각 정의된 함수와 클래스에 따라 2번째와 3번째의 메뉴가 선택된 상태로 실행된다.