[js 딥다이브] 25장 클래스

6주차

클래스

클래스는 프로토타입의 문법적 설탕인가?

클래스	생성자 함수
new 연산자 없이 호출 불가능	일반함수로 호출
extend, super 제공	미제공
호이스팅X처럼 동작	함수 선언문이면 함수 호이스팅, 함수 표현식은 변수 호이스팅
암묵적 strict mode	암묵적 strict mode 없음
constructor, 프로토타입 메서드, 정적 메서드는 Emuerable값이 flase, 즉 열거되지 않음

클래스 정의

일급 객체임.

클래스 호이스팅

클래스는 함수로 평가됨

class Person {}
console.log(typeof Person);

호이스팅이 발생하나 let, const처럼 일시적 사각시대가 있음

인스턴스 생성

클래스는 생성자 함수이며 new 연산자와 함께 호출

class Person {}
const me = new Person();
console.log(me); //Person {}

표현식으로 정의된 경우 식별자를 통해 호출해야됨. (이렇게 쓰는 경우는 못봄)

메서드

constructor(생성자), 프로토타입 메서드, 정적 메서드로 나뉨

constructor
인스턴스를 생성하고 초기화하기 위한 특수한 메서드. 이름 변경 불가

constructor는 메서드로 해석되는 것이 아니라 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다. 다시 말해, 클래스 정의가 평가되면 constructor의 기술된 동작을 하는 함수 객체가 생성된다

constructor는 생략이 가능하고 1개만 선언이 가능. 암묵적으로 this를 반환하므로 반환문이 없어야함. 명시적으로 원시값을 반환하며 무시대고 this를 반환함.

프로토타입 메서드
클래스 몸체에서 정의한 메서드는 생성자 함수에 의한 객체 생성 방식과는 다르게 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.

class Person {
 // 생성자
 constructor(name) {
 // 인스턴스 생성 및 초기화
 this.name = name;
 }
 // 프로토타입 메서드
 sayHi() {
 console.log(`Hi! My name is ${this.name}`);
 }
}
const me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 된다.

// me 객체의 프로토타입은 Person.prototype이다.
Object.getPrototypeOf(me) === Person.prototype; //  true
me instanceof Person; // true
// Person.prototype의 프로토타입은 Object.prototype이다.
Object.getPrototypeOf(Person.prototype) === Object.prototype; // true
me instanceof Object; // true
// me 객체의 constructor는 Person 클래스다.
me.constructor === Person; // true

한줄 요약 : 클래스는 생성자 함수와 마찬가지로 프로토타입 기반의 객체 생성 메커니즘.

정적 메서드
정적 메서드는 인스턴스를 생성하지 않고도 호출할 수 있는 메서드
static 키워드를 붙여서 생성한다.

class Person {
 // 생성자
 constructor(name) {
 // 인스턴스 생성 및 초기화
 this.name = name;
 }
 // 정적 메서드
 static sayHi() {
 console.log('Hi!');
 }
}

정적 메서드는 인스턴스로 호출할 수 없다. 정적 메서드가 바인딩된 클래스는 인스턴스의 프로토타입 체인 상에 존재하지 않기 때문이다. 다시 말해, 인스턴스의 프로토타입 체인 상에는 클래스가 존재하지 않기 때문에 인스턴스로 클래스의 메서드를 상속받을 수 없다.

정적 메서드와 프로토타입 메서드의 차이

1. 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다.
2. 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출한다.
3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.

클래스 또는 생성자 함수를 하나의 네임스페이스로 사용하여 정적 메서드를 모아 놓으면 이름 충돌 가능성을 줄여 주고 관련 함수들을 구조화할 수 있는 효과가 있다. 이 같은 이유로 정적 메서드는 애플리케이션 전역에서 사용할 유틸리티 함수를 전역 함수로 정의하지 않고 메서드로 구조화할 때 유용함.

클래스의 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩
2. 인스턴스 초기화
3. 인스턴스 반환

class Person {
 // 생성자
 constructor(name) {
 // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
 console.log(this); // Person {}
 console.log(Object.getPrototypeOf(this) === Person.prototype); // true
 // 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
 this.name = name;
 // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
 }
}

프로퍼티

인스턴스 프로퍼티는 contructor 내부에서 정의해야 함.
접근자 프로퍼티 get, set. 자체적인 값이 없음.

클래스 필드 정의 제안
private, public class field, static은 node12이상, 크롬(74), safari(14.1, 21년 5월)에서 잘 지원됨.
인스턴스를 생성할때 외부 초기값이 필요없는 경우 사용가능.

class Person {
  name = 'Lee'; //클래스필드에 문자열 할당

  getName = function() { //클래스 필드에 함수를 할당(미권장)
    return this.name;
  }
  getName = () => this.name; //화살표 함수도 가능(미권장)
}

private 필드 정의 제안
내부 참조만 가능

class Person {
  #name = 'Lee'; //몸체에 바로 정의해야함.
}

class Person {
  constructor {
    this.#name = 'Lee'; //얘는 동작안함.
  }
}

static 필드 정의 제안
class MyMath {
static PI = 22 / 7;
static #num = 10; // static private
}

상속에 의한 클래스 확장

클래스 상속과 생성자 함수 상속
프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장extends하여 정의하는 개념.

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

동적 상속

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

서브클래스의 constructor
상속 시 constructor를 생략하면 암묵적으로 다음과 같이 생성

constructor(...args) { super(...args); }

super 키워드
super를 호출하면 수퍼클래스의 constructor를 호출.
서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 한다.

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

super.메서드명();

상속 클래스의 인스턴스 생성과정
서브클래스는 자신이 직접 인스턴스를 생성하지 않고 수퍼클래스에게 인스턴스 생성을 위임한다. 이것이 바로 서브클래스의 constructor에서 반드시 super를 호출해야 하는 이유.

표준 빌트인 생성자 함수의 확장

/ Array 생성자 함수를 상속받아 확장한 MyArray
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