2022-03-11 노션페이지,
2022-03-29 노션페이지,
2022-04-18 노션페이지,
2022-05-15 노션페이지
기록된 노션을 다시 정리
어려웠던 부분
- constructor의 초기화 역할
- 초기화에서 변수에서의 초기화되고 할당단계인데
class에서는 어떻게 단계가 이루어지는지- getter, setter 사용 방법
1. 클래스 정의 (Class Definition)
- 생성자 함수의 역할을 한다.
- 생성자 함수와 같이 파스칼케이스를 사용한다.
- 클래스는 클래스 선언문 이전에 참조할 수 없다.
- let, const와 같은 호이스팅 방식
2. 인스턴스 생성
- 생성자 함수와 같이 new 연산자와 함께 클래스 이름을 호출하면 클래스의 인스턴스가 생성된다.
3. constructor
- constructor는 인스턴스를 생성하고 클래스 필드를 초기화하기 위한 특수한 메소드이다.
- 클래스 필드(class field) : 클래스 내부의 캡슐화된 변수를 말한다.
- constructor(생성자)메소드 내부에서만 클래스필드 선언과 초기화가 가능하다.
- constructor는 인스턴스의 생성과 동시에 클래스 필드의 생성과 초기화를 실행한다.
=> 초기화와 할당이 같이 이루어짐 (새로운 값을 넣을려면 사용해야 한다는 뜻)// 클래스 선언문 class Person { // constructor(생성자). 이름을 바꿀 수 없다. // constructor는 인스턴스의 생성과 동시에 // 클래스 필드의 생성과 초기화를 실행한다. constructor(name) { // this는 클래스가 생성할 인스턴스를 가리킨다. // _name은 클래스 필드이다. this._name = name; } }
4. 클래스 필드
- 클래스 몸체(class body)에는 메소드만 선언할 수 있다.
- 언제나 public이다.
5. getter, setter
사용이유:
1. 캡슐화
getter와 setter를 사용하여 클래스의 프로퍼티에 대한 접근을 제어할 수 있습니다.
2. 유효성 검사
setter를 사용하여 클래스의 프로퍼티에 할당된 값에 대한 유효성을 검사할 수 있습니다.
3. 계산된 프로퍼티
getter를 사용하여 클래스의 프로퍼티를 계산할 수 있습니다.getter : 값을 조회
- getter는 클래스 필드에 접근할 때마다 클래스 필드의 값을 조작하는 행위가 필요할 때 사용한다.
- getter는 메소드 이름 앞에 get 키워드를 사용해 정의한다.
- 클래스 필드 이름처럼 사용된다.
setter : 값을 조작
- setter는 클래스 필드에 값을 할당할 때마다 클래스 필드의 값을 조작하는 행위가 필요할 때 사용한다.
- setter는 메소드 이름 앞에 set 키워드를 사용해 정의한다.
- 클래스 필드 이름처럼 사용된다.
- 값을 할당 할 때 주의필요
class Foo { constructor(arr = []) { this._arr = arr; } // getter: get 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다. get firstElem() { // getter는 반드시 무언가를 반환하여야 한다. return this._arr.length ? this._arr[0] : null; } // setter: set 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다. set firstElem(elem) { // ...this._arr은 this._arr를 개별 요소로 분리한다 this._arr = [elem, ...this._arr]; } } const foo = new Foo([1, 2]); // 클래스 필드 lastElem에 값을 할당하면 setter가 호출된다. foo.firstElem = 100; console.log(foo.firstElem); // 100
6. 정적 메소드
- 클래스의 정적(static) 메소드를 정의할 때 static 키워드를 사용한다.
- 정적 메소드는 클래스의 인스턴스가 아닌 클래스 이름으로 호출한다.
class Foo { constructor(prop) { this.prop = prop; } static staticMethod() { /* 정적 메소드는 this를 사용할 수 없다. 정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다. */ return 'staticMethod'; } }
7. 클래스 상속
새롭게 정의할 클래스가 기존에 있는 클래스와 매우 유사하다면, 상속을 통해 그대로 사용하되 다른 점만 구현하면 된다.
extends 키워드
extends 키워드는 부모 클래스(base class)를 상속받는 자식 클래스(sub class)를 정의할 때 사용한다.
super 키워드
super 키워드는 부모 클래스를 참조(Reference)할 때 또는 부모 클래스의 constructor를 호출할 때 사용한다.
// 자식 클래스 class Cylinder extends Circle { constructor(radius, height) { super(radius); this.height = height; }super 메소드는 자식 클래스의 constructor에서 super()를 호출하지 않으면 this에 대한 참조 에러(ReferenceError)가 발생한다.
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } ---------------------------------------------------- class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(`${this.name} barks.`); } } const dog = new Dog('Bobby'); dog.speak(); // 출력 결과: "Bobby barks."
static 메소드와 prototype 메소드의 상속
- Prototype chain에 의해 부모 클래스의 정적 메소드도 상속됨을 의미한다.
- Prototype chain은 자신에게 해당 메소드가 없으면 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다.
class Parent { static staticMethod() { return 'staticMethod'; } } class Child extends Parent {} console.log(Parent.staticMethod()); // 'staticMethod' console.log(Child.staticMethod()); // 'staticMethod'
참조: poiemaweb.com
