[javascript] class

js에서의 class

• 객체를 만들기 위한 설계도(=일반적 정의와 동일)
• 프로토타입의 성질을 더 쉽게 사용하기 위한 "문법적 부가기능"
• Prototype과 달리 constructor라는 함수가 별개로 있다.
• 클래스 선언은 호이스팅 되지 않는다.

좋은 클래스란?

• 높은 응집도와 낮은 결합도를 가진 클래스를 설계하는 것
• 적절하게 관심사를 분리해 각 항목이 높은 독립성을 가지도록 설계하는 것
• 오픈소스 유저 라이브러리 등이 좋은 본보기가 된다.

응집도(Cohesion): 한 모듈 내부의 요소들이 서로 관련되어있는 정도를 말한다.

결합도(Coupling): 서로다른 모듈(클래스)간 상호 의존 정도

Prototype vs Class

// prototype
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.hi = function () {
  console.log(`hi, i'm ${this.name}`);
};

const silva = new Person("silva", 30);
silva.hi();

// class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  hi() {
    console.log(`hi, i'm ${this.name}`);
  }

  bye() {
    console.log(`bye!`);
  }
}

const carol = new Person("carol", 27);
carol.hi();
carol.bye();

정적(static)변수 및 메서드

• 인스턴스가 아닌 "클래스" 자체에 붙게 되는 속성
• 클래스명으로 직접 참조 가능
• static이라는 키워드 사용

용도

• 클래스 단위로 관리되어야 하는 변수나 함수가 필요할 때 사용
  • ex1. http 요청을 보내는 작업들만 모아둔 클래스일 떄 공용 헤더 보관
  • ex2. 클래스 메서드에서 공통으로 사용할 에러 핸들링 or 로깅 함수를 선언
• 상태정보가 필요없는 유사한 성질의 유틸성 함수들을 클래스로 묶고 싶을 때 사용

클래스 상속(inheritance)

• 상속이란 : 유사한 성질을 가진 개념들의 공통정보(=변수)또는 기능(=함수)을 클래스로 설계하고 이 상위개념의 설계도를 물려받아(=상속) 더 상세한 하위개념을 확장하여 설계할 수 있는 기능
• extends 키워드를 사용해 상속
• super 키워드를 사용해 부모클래스 접근가능
• 자식 클래스는 부모 클래스의 모든 변수와 메서드를 기본적으로 가지고 있게됨
• 어떻게 활용하는지에 따라 양날의 검이 될 수 있음
  • 잘쓰면 > 개발시간이 단축되고 코드 재사용성이 좋아짐
  • 못쓰면 > 코드간 의존성이 커져 유지보수가 어려워질 수 있음

class Child extends Parent {
  constructor(p1, p2) {
    super(p1, p2);
  }
}