JS 클래스

생성자 함수(prototype)

예시를 보겠습니다.

skye라는 변수가 선언되며,

중괄호가 시작하고 닫히는 객체 데이터가 할당되어져 있습니다.

그리고 객체 데이터가 아래쪽 console.log 를 통해서 출력합니다.

 

객체 데이터를 자세히 살펴보겠습니다.

firstName, lastName은 속성입니다.

속성이 함수로 할당되어 있으면 메소드라고 불리니, getFullName은 메소드입니다.

속성과 메소드를 통틀어서 멤버(Member)라고도 불립니다.

 

getFullName 메소드 return부분을 다시 보겠습니다.

따움표로 완성되지 않고 백틱으로 완성했습니다.

백틱 사이에는 다른 데이터가 보간되서 들어갑니다.

 

보간된 데이터에는 this.firstName이 있습니다.

this는 즉, 현재 소속된 함수가 실행된 객체 데이터를 지칭합니다.

 

여기서 생각해보겠습니다.

현재는 변수안에 명령어가 간단하게 구성되어 있지만,

만약에 이런 변수들은 수백개, 수천개가 있으면?

계속 복붙하면 효율(memory를 관리하는 효율)이 떨어집니다.

 

user함수를 만들어보겠습니다.

그리고 skye변수에 new user함수를 할당되어 있습니다.

여기서 skye는 인스턴스라고 불리고 new란 키워드를 사용해서 user가 생성자함수라고 합니다.

무엇을 생성한다는 뜻입니다.

여기서는 객체 데이터를 생성합니다.

 

new키워드를 사용되면 해당 함수는 암묵적으로  PascalCase로 명명합니다.

 

user함수는 매번 다른 값이 들어와서 통일해서 memory 관리하기 힘듭니다.

getFullName은 로직이 같아서 통일해서 memory 관리 가능합니다.

 

밑에 console.log실행할 때마다 prototype을 통해 만든 것을 참조하는 것입니다.

 

prototype을 사용해서, new라는 키워드와 함께,

생성자함수로 인스턴스를 만드는 개념이 JS의 클래스로 불립니다.

 

this

일반(Normal) 함수는 호출 위치에서 따라 this 정의되지만,

화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this를 정의합니다.

예시처럼, normal 부분은 skye변수가 호출해서,

this가 skye변수가 할당한 데이터 객체를 정의되고 있습니다.

arrow 부분은 해당 함수 범위 안에 찾을 수 없어 정의되지 않습니다.

 

콜백함수는 일반적으로 화살표함수를 통해 this를 사용합니다.

 

ES6 Classes

ES6에서 객체 데이터 안에 일반 함수가 있으면, 오른쪽처럼 function을 생략할 수 있습니다.

 

기존에 왼쪽처럼 작성했어야지만,

 ES6부터 오른쪽 class를 지원했습니다.

class 안에는 반드시 constructor를 사용해서 함수를 만들어야 합니다.

 

상속(확장)

예시를 보시면, Vehicle라는 클래스를 만들었습니다.

name과 wheel 매개변수가 있습니다.

Bicycle은 extends를 통해 Vehicle를 상속을 했습니다.

매개변수도 그대로 상속을 해야해서 super를 사용했습니다.

Car는 마찬가지 extends를 통해 Vehicle를 상속하려고 했습니다.

name과 wheel은 그대로 이어서 사용할 예정이니 super를 사용하고,

license 매개변수를 추가했습니다.