TIL - Class vs Object

Class (added ES6) vs Object

• Class

1. class는 데이터가 들어있지않고 템플릿만 정의 해놓은것이라 생각하면된다. 데이터 fields와 methods들이 있다. (methods가 없는 데이터 class도 있다.)
2. class는 정의만 해놓은것이라 메모리에 올라가지 않는다.

• Object (instance)

1. 클래스에 데이터를 넣어서 만들어지는 것이 Object이다.
2. object는 메모리에 올라간다.

1. Class declarations

• this는 생성된 Object를 나타낸다.
  

2. Getter and setters (참고사이트)

• Getter와 setter는 접근자 프로퍼티이다. 함수이지만 외부코드에서는 일반적인 프로퍼티 처럼보이며 사용이 가능하다. 언더바를 이용해서 this._age라고 해준 이유는 setter는 값을 할당할 때 setter함수를 호출하게 된다. 다시말해 set함수안에서 this.age= value가 할당될 때 set함수를 다시 실행하게되서 무한 루프에 빠진다. 이것을 방지하기위해 보통 변수앞에 언더바를 붙여준다. 이러면 총 3개의 필드 firstName, lastName, 언더바age 필드가있는것이다.
  내가 이해한 바로는 특정조건을 걸어서 값을 할당 하고싶으면 언더바를 붙인 새로운 필드를 생성해서 get과 set을 사용하면되는 것 같다.(간략한이해)

언더바 사용전

언더바 사용후

3. Public & Private (알아만두자)

4. Static (알아만두자)

Class가 고유하게 가질 수 있는 고유값과 반복적으로 사용되는 methods를 static으로 설정할 수 있다.
static과 static methods를 사용하여 작성하면 메모리의 사용을 줄여줄 수 있어 사용한다.(타입스크립트에서 많이 사용된단다.)
생성된 오브젝트로는 접근하면 undefined가 나오니 클래스 자체로 접근해야한다.

5. 상속 & 다형성

상속 : Class는 extends를 사용하여 상속을 해줄 수 있다. 상속을 받으면 상속받은 class의 기능을 다 사용가능하다.
다양성 : 상속받은 methods를 오버라이딩(재정의)해서 사용할 수 있다. 또한 super()를 이용하여 상속받은 method도 사용하고 오버라이딩 한 method를 사용할 수 도 있다.

6. instanceOf

왼쪽에 있는 Object가 오른쪽에 있는 Class를 이용해서 만들어진것인지 아닌지 확인하는 것이다. JS에 있는 모든 Object, Class는 자바스크립트의 Object를 상속한 것이라 맨 마지막 것도 true이다.

Object를 상속한 것이기 때문에 Object에 설정된 함수들도 오버라이딩하여 사용할 수 있다.

참고사이트

드림코딩유튜브