javascript.info - 9.클래스

클래스와 기본 문법

• 기본 문법

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

-> 위와 같이 클래스 생성 후, new MyClass()를 호출하면 내부에서 정의된 메서드가 들어있는 객체 생성됨.

new에 의해 내부 constructor() 자동 호출, 자동으로 객체 초기화 가능.

 

클래스란?

자바스크립트에서는 클래스가 함수의 한 종류.

순수 함수로 클래스 역할을 하는 함수를 선언하는 방법과 class 키워드를 사용하는 방법의 결과는 거의 같다.

차이점

1) class로 만든 함수엔 [[ IsClassConstructor ]]: true 프로퍼티가 붙는다.

2) class에 정의된 메서드는 non-enumerable(열거 불가).

3) class는 항상 use strict(엄격 모드)로 실행된다.

 

리터럴을 사용해 만든 객체처럼 클래스도 getter, setter, computed property를 지원한다.

*** 최근 더해진 기능이라, 구식 브라우저에선 폴리필이 필요할 수 있다.

---

클래스 상속

- 'extends' 키워드

- 메서드 오버라이딩

    Child에 정의된 메서드에서 super.method()를 통해 Parent에 정의된 메서드 사용 가능.

- 생성자 오버라이딩

- super 키워드 [[HomeObject]]

https://ko.javascript.info/class-inheritance

클래스 상속

정적 메서드와 정적 프로퍼티

정적 메서드 : 프로토타입이 아닌 클래스 함수 자체에 메서드를 설정할 수 있음.

=> 클래스 내에 만들어진 Static 메서드를 변수에 담아 메서드만 호출 가능.

정적 프로퍼티 : 클래스를 상속받은 객체가, 정적 프로퍼티를 호출하면, 클래스의 프로퍼티가 호출된다.

 

https://ko.javascript.info/static-properties-methods

정적 메서드와 정적 프로퍼티

---

private, protected 프로퍼티와 메서드

객체 지향 프로그램의 프로퍼티와 메서드는 두 그룹으로 나뉜다.

• 내부 인터페이스(internal interface) – 동일한 클래스 내의 다른 메서드에선 접근할 수 있지만, 클래스 밖에선 접근할 수 없는 프로퍼티와 메서드
• 외부 인터페이스(external interface) – 클래스 밖에서도 접근 가능한 프로퍼티와 메서드

자바스크립트는 다음과 같이 두 가지 타입의 객체 필드(프로퍼티와 메서드)로 나뉨.

• public: 어디서든지 접근할 수 있으며 외부 인터페이스를 구성. 
• private: 클래스 내부에서만 접근가능. 내부 인터페이스를 구성할 때 사용.

https://ko.javascript.info/private-protected-properties-methods

private, protected 프로퍼티와 메서드

*** protected, private 프로퍼티는 스펙에 추가된 지 얼마 안 된 문법.

---

내장 클래스 확장하기

배열, 맵 같은 내장 클래스도 확장이 가능하다. 즉 상속받아 사용 가능.

---

 

'instanceof'로 클래스 확인하기

객체가 특정 클래스에 속하는지 아닌지 확인 가능.

상속 관계 확인 가능.

instanceof 연산자.

obj instanceof Class

 

타입 확인을 위한 Object.prototype.toString

- Object.prototype.toString 메서드를 사용해 내장 객체의 타입을 문자열 형태로 받을 수 있음.

Symbol.toStringTag를 사용해 toString의 동작을 커스터 마이징해 사용.

{}.toString.call

https://ko.javascript.info/instanceof

'instanceof'로 클래스 확인하기

---

Mixins

다른 클래스에 메서드를 원하는 클래스의 프로토타입에 병합할 수 있게 만들어주는 기능. 

// 믹스인
let sayHiMixin = {
  sayHi() {
    alert(`Hello ${this.name}`);
  },
  sayBye() {
    alert(`Bye ${this.name}`);
  }
};

// 사용법:
class User {
  constructor(name) {
    this.name = name;
  }
}

// 메서드 복사
Object.assign(User.prototype, sayHiMixin);

// 이제 User가 인사를 할 수 있습니다.
new User("Dude").sayHi(); // Hello Dude!

이벤트 믹스인

믹스인은 이벤트 생성 메서드를 갖고 있음.

어떤 동작이 일어나면 그에 대한 이벤트를 생성해 그에 따른 실행이 되게 만들 수 있음.

- .on(eventName, handler) : eventName에 해당하는 이벤트가 발생하면 실행시킬 함수 handler를 할당. 한 이벤트에 대응하는 핸들러가 여러 개 있을 때, 프로퍼티 _eventHandler 는 핸들러가 담긴 배열을 저장. 하나인 경우에는 핸들러가 배열에 추가만 됨.

- .off(eventName, handler) : 핸들러 리스트에서 handler를 제거한다.

- .trigger(eventName, ...args) : 이벤트 생성.