25 - [JavaScript] 클래스

김태성·2022년 7월 27일
JavaScript자바스크립트자바스크립트 deep dive
0

모던 자바스크립트 딥 다이브

목록 보기
10/11

본 게시글은 "모던 자바스크립트 Deep Dive"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.

클래스

클래스는 새로운 객체 생성 메커니즘

자바스크립트는 클래스가 필요없는 프로토타입 기반 객체지향 언어

ES6부터 클래스를 도입하지만, 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있다.

클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다. 특히 extends와 super 키워드는 상속 관계 구현을 더욱 간결하고 명료하게 한다.

생성자 함수는 가지고 있지 않은 클래스가 가진 특징

  • new 연산자 없이 호출하면 에러가 발생
  • 상속을 지원하는 extends와 super 키워드를 제공
  • 클래스는 호이스팅이 발생하지 않는 것 처럼 동작
  • 클래스 내의 모든 코드는 암묵적 strict mode로 지정되고, 해제할 수 없음
  • 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어티리뷰트 [[Enumeralble]]의 값이 false이다. 즉, 열거 불가

클래스는 가지고 있지 않은 생성자 함수가 가진 특징

  • 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출
  • 함수 선언문으로 선언한 생성자 함수는 함수 호이스팅, 함수 표현식으로 선언한 생성자 함수는 변수 호이스팅

클래스 정의

  • class 키워드를 사용하여 정의
  • 클래스 이름은 주로 파스칼 케이스를 사용
  • 클래스는 일급 객체
  • 무명의 리터럴로 생성 가능. 즉, 런타임에 생성이 가능
  • 변수나 자료구조(객체, 배열 등)에 저장 가능
  • 함수의 매개변수에게 전달 가능
  • 함수의 반환값으로 사용 가능
// 익명 클래스 표현식
const Person = class {};

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

클래스 호이스팅

클래스가 평가되어 생성된 함수 객체는 constructor(생성자 함수로서 호출할 수 있는 함수)이다.
생성자 함수로서 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
즉, 런타임 이전(소스코드 평가과정)에 먼저 평가되어 함수 객체를 생성한다.

const Person = "";

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

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

위 예제를 보자.

클래스는 함수로 평가된다.
변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생하지만, 호이스팅이 발생하지 않는 것처럼 동작한다.
let, const 키워드로 선언한 변수처럼 호이스팅 되어 선언과 초기화가 분리되어 진행되기 때문이다.

TDZ(일시적 사각지대)에 빠지게 되어 호이스팅이 발생하지 않는 것처럼 동작한다.

인스턴스 생성

클래스는 생성자 함수이며, 인스턴스 생성 시에 반드시 new 연산자와 함께 호출해야 한다.
클래스 표현식으로 정의된 클래스 경우, 클래스를 가리키는 식별자를 사용해 인스턴스를 생성한다.
클래스 이름은 함수와 동일하게 클래스 몸체 내부에서만 유효한 식별자다.

const Person = class MyClass {};

// 함수 표현식과 마찬가지로 클래스를 가리키는 식별자로 인스턴스를 생성해야 한다.
const me = new Person();

// 클래스 이름 MyClass는 함수와 동일하게 클래스 몸체 내부에서만 유효한 식별자다.
console.log(MyClass); // ReferenceError: MyClass is not defined

const you = new MyClass(); // ReferenceError: MyClass is not defined 5. 메서드

클래스 몸체에서 정의할 수 있는 메서드는 세 가지가 있다.

  • constructor
  • 프로토타입 메서드
  • 정적 메서드

constructor

  • 인스턴스를 생성하고 초기화한다.
  • 클래스 내에 최대 한개만 존재
  • constructor는 생략 가능(생략하면 빈 객체를 생성)
  • 별도의 반환문을 갖지 않아야 함
  • return을 사용 안하는 것이 바람직함
  • this가 아닌 다른 객체를 명시적으로 return하면 해당 객체가 반환
  • 원시값을 return하면 무시하고 암묵적으로 this 반환
  • 함수와 동일하게 프로토타입과 연결되어 있으며 자신의 스코프 체인을 구성한다.
class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }
}

프로토타입 메서드

생성자 함수와 다르게 클래스는 프로토타입 메서드를 사용하지 않아도 기본적으로 프로토타입 메서드 타입이 된다.

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) 메서드

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

class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }

  // 정적 메서드
  static sayHi() {
    console.log("Hi!");
  }
}
  • 클래스에 바인딩
  • 정적 메서드는 인스턴스로 호출할수 없고 클래스로 호출
  • 정적 메서드가 바인딩 된 클래스는 인스턴스의 프로토타입 체인상에 존재하지 않기 때문

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

  • 자신이 속해 있는 프로토타입 체인이 다르다
  • 정적 메서드는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다.
  • 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만, 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있음
  • this 바인딩이 다름

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

클래스의 인스턴스는 new 연산자와 함께 호출한다.
new 연산자 없이는 호출 불가하다.
new 연산자와 클래스 호출하면 클래스의 내부 메서드 [[Construct]] 호출
(생성자 함수와 동일)

인스턴스 생성 과정

  1. 인스턴스 생성과 this 바인딩
    new 연산자로 클래스를 호출하면 암묵적으로 빈 객체 생성
    생성된 인스턴스의 프로토타입은 클래스의 prototype 프로퍼티가 가리키는 객체로 설정됨
    암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩
  2. 인스턴스 초기화
    this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가
    constructor가 전달받은 초기값 인수로 인스턴스의 프로퍼티 값을 초기화
  3. 인스턴스 반환
    완성된 인스턴스가 바인딩된 this가 암묵적으로 반환

상속에 의한 클래스 확장

클래스 상속과 생성자 함수 상속

기존 클래스를 상속받아 새로운 클래스를 확장하여 정의한다.
클래스와 생성자 함수는 인스턴스를 생성할 수 있는 함수라는 점에서 매우 유사하다.
클래스는 상속을 통해 다른 클래스를 확장할 수 있는 문법인 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

동적 상속

extends 키워드를 통해 생성자 함수를 상속 가능

extends 키워드 다음에는 클래스, [[Constructor]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식을 사용 가능
이를 통해 동적을 상속받을 대상을 결정 가능

서브 클래스의 constructor

클래스에서 constructor를 생략하면 암묵적으로 빈 객체가 정의된다

// 수퍼클래스
class Base {
constructor() {}
}

// 서브클래스
class Derived extends Base {
constructor() {
super();
}
}

const derived = new Derived();
console.log(derived); // Derived {}
서브 클래스에 constructor를 생략하면 암묵적으로 super(...args)가 정의 됨
constructor(...args) { super(...args); }
// 수퍼클래스
class Base {
constructor(a, b) {
this.a = a;
this.b = b;
}
}

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

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

super()는 수퍼클래스의 constructor를 호출하여 인스턴스를 생성

super 키워드

  • 함수처럼 호출할 수도 있고, this와 같이 참조할 수 있는 특수한 키워드이다.
  • super 호출이란 수퍼 클래스의 constructor(super-constructor)를 호출하는 것

super 호출 주의 사항
서브클래스에서 constructor을 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 함

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

  • 서브클래스의 super 호출
  • 수퍼클래스의 인스턴스 생성과 this 바인딩
  • 수퍼클래스의 인스턴스 초기화
  • 서브클래스 constructor로의 복귀와 this 바인딩
  • 서브클래스의 인스턴스 초기화
  • 인스턴스 반환
// 수퍼클래스
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}

getArea() {
return this.width \* this.height;
}

toString() {
return `width = ${this.width}, height = ${this.height}`;
}
}

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

// 메서드 오버라이딩
toString() {
return super.toString() + `, color = ${this.color}`;
}
}

const colorRectangle = new ColorRectangle(2, 4, "red");
console.log(colorRectangle); // ColorRectangle {width: 2, height: 4, color: "red"}

// 상속을 통해 getArea 메서드를 호출
console.log(colorRectangle.getArea()); // 8
// 오버라이딩된 toString 메서드를 호출
console.log(colorRectangle.toString()); // width = 2, height = 4, color = red 7. 표준 빌트인 생성자 함수 확장
profile
김태성
@flip_404
이전 포스트

24 - [JavaScript] 클로저

다음 포스트

27 - [JavaScript] Number

0개의 댓글