[ES] Classes

만약 서로 다른 객체가 같은 프로토타입의 속성을 상속한다면 이는 두가지 사실을 의미한다.

• 두 객체는 같은 클래스(Class)의 인스턴스이다.
• 또한 두 객체는 같은 생성함수(constructor function)에 의해 초기화되고 만들어졌다.

자바스크립트의 클래스(Class)는 같은 프로토타입 객체로부터 속성들을 상속받은 객체들의 집합이다. 따라서 우리가 만약 프로토타입 객체를 정의하고 Object.create()를 이용해 정의한 객체를 상속하는 객체들을 만든다면 자바스크립트의 클래스(Class)를 정의했다고 할 수 있다.
또한 클래스는 일종의 함수로도 생각할 수 있다. ES6이후에 추가된 class문법과 더불어 그 의미가 확장되었다.

ES5 이전의 클래스

class문법은 ES6에서 추가된 문법이고 이전에는 factory function이라 불리우는 함수가 클래스의 인스턴스를 만들고 초기화하는 일을 했다. factory function은 더이상 쓰지 않는 문법이지만(사용은 가능함), 클래스의 작동 원리를 보는 데에는 factory function의 기능을 해석하는것이 도움이 된다. 아래는 factory function의 예시이다.

function range(from, to){
  //creat를 이용해 아래 정의한 객체의 속성을 상속받는 객체 생성
  let r = Object.create(range.methods);
  
  //상속받지 않는 this object만의 속성
  r.from = from;
  r.to = to;
  
  return r;
}

//이 ptototype객체는 모든 range객체의 상속될 methods를 정의한다.
range.methods = {
  includes(x) { ... }
  ...
}

let r = range(1,3); //r 객체 생성
r.includes(2);      //메소드 기능 수행
               

range함수를 보면 r객체를 생성해 range의 methods를 상속하고 r.from과 r.to를 통해 r객체에 속성을 추가해준다. 그리고 r를 반환한다. let newObj = range(a,b)를 통해 생성된 newObj는 이제 range클래스의 인스턴스가 된어 상속받은 메소드들을 호출하여 사용할 수 있다.

ES6 이후의 클래스

이제 class문법으로 위의 같은 역할을 하는 class를 정의할 수 있다.

class Range{ //관례상 class의 이름은 대문자로 시작
  constructor(from, to){
    //상속받지 않는 this object만의 속성
    this.from = from;
    this.to = to;
  }
  //methods 직접 정의
  includes(x){ ...}
}
  
let r = new Range(1,3); //r 객체 생성
r.includes(2)  //메소드 사용

class 문법으로 정의한 클래스는 ES5이전 문법으로 정의한 클래스와 정확히 같은 역할을 한며 자바스크립트의 prototype-based 클래스의 원칙을 바꾸지 않는다.

Extends와 Super

만약 우리가 어떤 클래스를 상속받는 클래스를 만들고 싶다면 class문법과 함께 extends문법을 사용하면 쉽게 만들 수 있다.

class Span extends Range {
	constructor(start, length) {
		if (length >= 0) {
			super(start, start + length);
		} else {
			super(start + length, start);
		}
	}
}

위와같이 Range클래스를 상속하는 클래스Span을 만들 수 있다.