25장: 클래스

중요

클래스는 문법적 설탕?

클래스 기반 언어에 익숙한 프로그래머들에게 프로토타입 기반 프로그래밍에 혼란을 느낀다. (공감)

클래스 도입을 문법적 설탕(=같은기능인데 높은가독성)이라고 많이 표현하는 듯하다. 저자는 새로운 객체 생성 매커니즘이라고 생각한다.

아래 사례들, 클래스가 생성자 함수 기반의 객체 생성 방식보다 간단 명료하다.

사례 1: 기본

• 정적 메서드

  • 예시

    • Math.random(), Number.isNaN(NaN);

  • 정적 메서드와 프로토타입 메서드는 속해있는 프로토타입 체인이 다르다.

    • 생성된 객체의 프로퍼티 참조 가능 여부 차이

// Before ES6
var Person = (function () {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function () {
    console.log('Hi! My name is ' + this.name);
  };

  // 생성자 함수 반환
  return Person;
}());

// 인스턴스 생성
var me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

// ----------------------------------------
// After ES6
// 클래스 선언문
// 메서드 종류 3가지 : 인스턴스 생성 및 초기화, 프로토타입 메서드, 정적 메서드
class Person {
  constructor(name) {
    this.name = name; // name 프로퍼티는 public하다.
  }

  // prototype 에 메서드를 추가하지 않아도 자동으로 프로토타입 메서드가 된다. 
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }

  // 인스턴스 생성없이도 호출 	가능
  static sayHello() {
    console.log('Hello!');
  }
}

const me = new Person('Lee');
console.log(me.name); // Lee
me.sayHi(); // Hi! My name is Lee
Person.sayHello(); // Hello!

console.log(Object.getPrototypeOf(me) == Person.prototype) // true
console.log(me.constructor == Person) // true

사례 2: 상속

• extend, super 키워드는 상속 관계 구현을 더 간결명료하고 코드 재사용 관점에서 유용.

  • super를 참조하면 수퍼 클래스의 메서드를 호출할 수 있다

  • 생성자함수는 extends와 super 키워드를 지원하지 않음

• 클래스 뿐만 아니라, 생성자 함수도 상속 가능하다.

• 서브클래스에서 constructor를 정의하지 않아도, 자동 생성된다.

• 서브클래스 정적 메서드에서는 부모 정적 메서드만 호출 가능하다.

• 축약표현으로 정의된 함수만이 [[HomeObject]]를 갖는다.

  • 부모 객체 찾아가기 위한 속성

• 항상 먼저 super 호출 필요하다.

• super 로 부모 호출시 부모 생성자에서 this는 생성하려는 자식 인스턴스가 된다.

• 빌트인 생성자 함수 (Array 등) 확장도 가능하다.

생성자 함수는 클래스와 같이 상속을 통해 다른 생성자 함수를 확장할 수 있는 문법이 제공되지 않는다. 아래코드는 상속 흉내낸 pseudo classical inheritance 패턴

// After ES6
class Animal {
  constructor(age, weight) {
    this.age = age;
    this.weight = weight;
  }

  eat() { return 'eat'; }

  move() { return 'move'; }
}

// 상속을 통해 Animal 클래스를 확장한 Bird 클래스
class Bird extends Animal {
  fly() { return 'fly'; }
}

const bird = new Bird(1, 5);

console.log(bird); // Bird {age: 1, weight: 5}
console.log(bird instanceof Bird); // true
console.log(bird instanceof Animal); // true

console.log(bird.eat());  // eat
console.log(bird.move()); // move
console.log(bird.fly());  // fly
// --------------------------------------------------------
// Before ES6
// 의사 클래스 상속(pseudo classical inheritance) 패턴
var Animal = (function () {
  function Animal(age, weight) {
    this.age = age;
    this.weight = weight;
  }

  Animal.prototype.eat = function () {
    return 'eat';
  };

  Animal.prototype.move = function () {
    return 'move';
  };

  return Animal;
}());

// Animal 생성자 함수를 상속하여 확장한 Bird 생성자 함수
var Bird = (function () {
  function Bird() {
    // Animal 생성자 함수에게 this와 인수를 전달하면서 호출
    Animal.apply(this, arguments);
  }

  // Bird.prototype을 Animal.prototype을 프로토타입으로 갖는 객체로 교체
  Bird.prototype = Object.create(Animal.prototype);
  // Bird.prototype.constructor을 Animal에서 Bird로 교체
  Bird.prototype.constructor = Bird;

  Bird.prototype.fly = function () {
    return 'fly';
  };

  return Bird;
}());

var bird = new Bird(1, 5);

console.log(bird); // Bird {age: 1, weight: 5}
console.log(bird.eat());  // eat
console.log(bird.move()); // move
console.log(bird.fly());  // fly

• 추가적으로, 클래스와 생성자 함수 차이

  • 클래스 암묵적으로 strict mode로 실행된다 (해제 불가), 생성자함수는 strict mode 지정 X

    • 기존에 넘어갔었던 오류가 심각한 버그가 될 경우도 있기에, strict 하게 검사한다. (예전 버전과 compatibility 위해)

  • 클래스는 호이스팅이 발생하지 않는것 처럼 동작한다. 하지만 함수선언문으로 정의된 생성자함수는 함수 호이스팅이, 함수표현식으로 정의한 생성자함수는 변수 호이스팅이 발생한다

    • 변수 호이스팅: 변수의 선언 위치와 상관없이 코드 내 어느 곳에서든 호출이 가능지만 초기화는 undefined

    • 함수 호이스팅: 함수의 선언 위치와 상관없이 코드 내 어느 곳에서든 호출 가능

  • 클래스의 constructor, 프로토타입메서드, 정적메서드는 모두 프로퍼티 속성인 [[Enumerable]]의 값이 false다.

    • for-in 문이나 Object.keys 열거할 수 없다. (propertyIsEnumerable()로 확인 가능)

그냥 보기

클래스 정의 방법

• 클래스를 표현식으로 표현이 가능한 이유는?

  • 클래스가 값으로 사용할 수 있는 1급 객체

// 일반 클래스 선언문
class Person {}

// 익명 클래스 표현식
const Person = class {};

// 기명 클래스 표현식
const Person = class MyClass {};

일급 객체?

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다

• 변수나 자료구조(배열 등)에 저장할 수 있다

• 함수 매개변수로 전달 가능하다

• 함수 반환값으로 사용될 수 있다.

클래스 호이스팅

• 함수 선언문과 같이 런타임 이전 평가되어 객체를 생성한다.

• 클래스는 let, const 로 선언한 변수와 같이 호이스팅된다. 따라서 TDZ에 빠지기도 한다.

// 정의 이전 호출 불가
console.log(Person); // ReferenceError: Cannot access 'Person' before initialization

// 클래스 선언문
class Person {}
// --------------------------------------------------------
const Person = '';

{
  // 호이스팅이 발생하지 않는다면 ''이 출력되어야 한다.
  console.log(Person); // ReferenceError: Cannot access 'Person' before initialization

  // 클래스 선언문
  class Person {}
}

constructor

construction 는 메서드로 해석되는 것이 아니라, 클래스가 평가되어 생성한 함수객체 코드의 일부가 된다.

constructor 내부에서 return 문은 쓰지 말자 (써도 this 만 반환됨)

// 클래스와 생성자 함수 인스턴스 생성 및 초기화 차이
class Person {
  constructor(name) {
    this.name = name;
  }
}

function Person(name) {
  this.name = name;
}
// ------------------------------------
// 클래스 인스턴스 생성 과정
class Person {
  constructor(name) {
    // 1. 처음에 암묵적으로 인스턴스가 생성되고 this에 바인딩된다. (this는 생성하려는 자식 인스턴스)
    console.log(this); // Person {}
    // 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
    this.name = name;
    // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

  }
}

접근자 프로퍼티 (get, set)

// 생성자 함수 예시
const person = {
  firstName: 'Ungmo',
  lastName: 'Lee',
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
};

// setter 이용
person.fullName = 'Heegun Lee'; // 자바랑 다르구만.

console.log(person); // {firstName: "Heegun", lastName: "Lee"}

// getter 이용
console.log(person.fullName); // Heegun Lee

// 접근자 프로퍼티는 get, set, enumerable, configurable 프로퍼티 어트리뷰트를 갖는다.
console.log(Object.getOwnPropertyDescriptor(person, 'fullName'));
// {get: ƒ, set: ƒ, enumerable: true, configurable: true}
// ------------------------------------------------------------------
// 클래스 예시
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
  // getter 함수
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  // setter 함수
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const me = new Person('Ungmo', 'Lee');

// setter 이용
me.fullName = 'Heegun Lee';
console.log(me); // {firstName: "Heegun", lastName: "Lee"}

// getter 이용
console.log(me.fullName); // Heegun Lee

// 접근자 프로퍼티는 get, set, enumerable, configurable 프로퍼티 어트리뷰트를 갖는다.
console.log(Object.getOwnPropertyDescriptor(Person.prototype, 'fullName'));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

함수는 일급 객체이므로 함수를 클래스 필드에 함수를 할당가능하다. 다만, 프로토타입 메서드가 아닌 인스턴스 메서드가 되게 된다. 권장하지 않는 방식이라고 저자는 말한다.

class Person {
  name = 'Lee';

  // 함수는 일급 객체이므로 함수를 클래스 필드에 함수를 할당가능하다
  getName1 = function () {
    return this.name;
  }
  // 화살표 함수로 정의할 수도 있다.
  getName2 = () => this.name;
}

const me = new Person();
console.log(me); // Person {name: "Lee", getName: ƒ}
console.log(me.getName1()); // Lee
console.log(me.getName2()); // Lee

상속

클래스가 클래스 뿐만 아니라, 생성자 함수도 상속 받을 수도 있다

function Base(a) {
  this.a = a;
}

class Derived extends Base {}

const derived = new Derived(1);
console.log(derived); // Derived {a: 1}

동적 상속 (wow 이런게 되네..) 잘쓰이나요? 궁금

function Base1() {}

class Base2 {}

let condition = true;

// 조건에 따라 동적으로 상속 대상을 결정하는 서브클래스
class Derived extends (condition ? Base1 : Base2) {}

const derived = new Derived();
console.log(derived); // Derived {}

console.log(derived instanceof Base1); // true
console.log(derived instanceof Base2); // false

서브클래스에서 constructor를 정의하지 않아도, 자동 생성된다.

• super 동작

  • super를 호출하면 수퍼클래스의 constructor를 호출한다.

  • super를 참조하면 수퍼 클래스의 메서드를 호출할 수 있다

class Base {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}

// 서브클래스
class Derived extends Base {}
// --------------------

// 서브클래스
class Derived extends Base {
  // 다음과 같이 암묵적으로 constructor가 정의된다.
  constructor(...args) { 
    super(...args); 
    
  }
}

const derived = new Derived(1, 2);
console.log(derived);

항상 super 먼저 호출

서브클래스는 수퍼클래스에게 인스턴스 생성을 위임한다. 이것이 반드시 super 호출을 필요로 하는 이유다.

class Base {}

class Derived extends Base {
  constructor() {
    // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    console.log('constructor call');
  }
}

const derived = new Derived();
// --------------------------------------------
class Derived extends Base {
  constructor() {
    // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    this.a = 1;
    super();
  }
}

super 로 상위 메서드 호출

// 수퍼클래스
class Base {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    return `Hi! ${this.name}`;
  }
}

// 서브클래스
class Derived extends Base {
  sayHi() {
    // super.sayHi는 수퍼클래스의 프로토타입 메서드를 가리킨다.
    return `${super.sayHi()}. how are you doing?`;
  }
}

const derived = new Derived('Lee');
console.log(derived.sayHi()); // Hi! Lee. how are you doing?

(new Derived('yoochul')).sayHi();

[[HomeObject]]

축약표현으로 정의된 함수만이 [[HomeObject]]를 갖는다.

const obj = {
  // foo는 ES6의 메서드 축약 표현으로 정의한 메서드다. 따라서 [[HomeObject]]를 갖는다.
  foo() {},
  // bar는 ES6의 메서드 축약 표현으로 정의한 메서드가 아니라 일반 함수다.
  // 따라서 [[HomeObject]]를 갖지 않는다.
  bar: function () {}
};

const base = {
  name: 'Lee',
  sayHi() {
    return `Hi! ${this.name}`;
  }
};

const derived = {
  __proto__: base,
  // ES6 메서드 축약 표현으로 정의한 메서드다. 따라서 [[HomeObject]]를 갖는다.
  sayHi() {
    return `${super.sayHi()}. how are you doing?`;
  }
};

console.log(derived.sayHi()); // Hi! Lee. how are you doing?

정적에서는 정적만

class Base {
  static sayHi1() {
    return 'Hi111!';
  }
   sayHi2() {
    return 'Hi222!';
  }
}

// 서브클래스
class Derived extends Base {
  static sayHi1() {
    // super.sayHi는 수퍼클래스의 정적 메서드를 가리킨다.
    return `${super.sayHi1()} how are you doing?`;
  }
   static sayHi2() {
    // super.sayHi는 수퍼클래스의 정적 메서드를 가리킨다.
    return `${super.sayHi2()} how are you doing?`;
  }
}

console.log(Derived.sayHi1());
console.log(Derived.sayHi2()); // 에러

동작 원리

클래스 평가시, 수퍼와 서브 클래스를 나누는 방식 [[ConstructorKind]] 이용 하여, 부모 자식에 각각 "base" 또는 "derived" 값을 넣어준다. 이를통해 new연산자로 호출되었을때의 동작이 구분된다.

super 로 부모 호출시 부모 생성자에서 this는 생성하려는 자식 인스턴스가 된다.

class Rectangle {
  constructor(width, height) {
    // 암묵적으로 빈 객체, 즉 인스턴스가 생성되고 this에 바인딩된다.
    console.log(this); // ColorRectangle {}
    // new 연산자와 함께 호출된 함수, 즉 new.target은 ColorRectangle이다.
    console.log(new.target); // ColorRectangle

    // 생성된 인스턴스의 프로토타입으로 ColorRectangle.prototype이 설정된다.
    console.log(Object.getPrototypeOf(this) === ColorRectangle.prototype); // true
    console.log(this instanceof ColorRectangle); // true
    console.log(this instanceof Rectangle); // true

    // 인스턴스 초기화
    this.width = width;
    this.height = height;

    console.log(this); // ColorRectangle {width: 2, height: 4}
  }
...

// ------------------------------------
// 서브클래스
class ColorRectangle extends Rectangle {
  constructor(width, height, color) {
    super(width, height);

    // super가 반환한 인스턴스가 this에 바인딩된다.
    console.log(this); // ColorRectangle {width: 2, height: 4}
...

빌트인 생성자 함수 확장 (Array 등)

class MyArray extends Array {
  // 중복된 배열 요소를 제거하고 반환한다: [1, 1, 2, 3] => [1, 2, 3]
  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i);
  }

  // 모든 배열 요소의 평균을 구한다: [1, 2, 3] => 2
  average() {
    return this.reduce((pre, cur) => pre + cur, 0) / this.length;
  }
}

const myArray = new MyArray(1, 1, 2, 3);
console.log(myArray); // MyArray(4) [1, 1, 2, 3]

// MyArray.prototype.uniq 호출
console.log(myArray.uniq()); // MyArray(3) [1, 2, 3]
// MyArray.prototype.average 호출
console.log(myArray.average()); // 1.75

최신 브라우저에서는 작동하는 코드들

아래 처럼 자바 같이 정의하면 문법에러 발생해야함.

class Person {
  // 클래스 필드 정의
  name = 'Lee';
}

const me = new Person('Lee');

private 필드는 존재하지 않았다.

class Person {
  // private 필드 정의
  #name = '';

  constructor(name) {
    // private 필드 참조
    this.#name = name;
  }
}

const me = new Person('Lee');

// private 필드 #name은 클래스 외부에서 참조할 수 없다.
console.log(me.#name);
// SyntaxError: Private field '#name' must be declared in an enclosing class

// ------------------------------------------------------ 
class Person {
  constructor(name) {
    // private 필드는 클래스 몸체에서 정의해야 한다.
    this.#name = name; // SyntaxError: Private field '#name' must be declared in an enclosing class
  }
}

static키워드를 사용하여 정적필드를 정의할 수는 없었다.

class MyMath {
  // static public 필드 정의
  static PI = 22 / 7;

  // static private 필드 정의
  static #num = 10;

  // static 메서드
  static increment() {
    return ++MyMath.#num;
  }
}

console.log(MyMath.PI); // 3.142857142857143
console.log(MyMath.increment()); // 11