본 게시글은 "모던 자바스크립트 Deep Dive"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.
자바스크립트는 클래스가 필요없는 프로토타입 기반 객체지향 언어
ES6부터 클래스를 도입하지만, 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있다.
클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다. 특히 extends와 super 키워드는 상속 관계 구현을 더욱 간결하고 명료하게 한다.
생성자 함수는 가지고 있지 않은 클래스가 가진 특징
클래스는 가지고 있지 않은 생성자 함수가 가진 특징
// 익명 클래스 표현식
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. 메서드
클래스 몸체에서 정의할 수 있는 메서드는 세 가지가 있다.
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 키워드를 붙여서 생성한다.
class Person {
// 생성자
constructor(name) {
// 인스턴스 생성 및 초기화
this.name = name;
}
// 정적 메서드
static sayHi() {
console.log("Hi!");
}
}
클래스의 인스턴스는 new 연산자와 함께 호출한다.
new 연산자 없이는 호출 불가하다.
new 연산자와 클래스 호출하면 클래스의 내부 메서드 [[Construct]] 호출
(생성자 함수와 동일)
인스턴스 생성 과정
기존 클래스를 상속받아 새로운 클래스를 확장하여 정의한다.
클래스와 생성자 함수는 인스턴스를 생성할 수 있는 함수라는 점에서 매우 유사하다.
클래스는 상속을 통해 다른 클래스를 확장할 수 있는 문법인 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를 생략하면 암묵적으로 빈 객체가 정의된다
// 수퍼클래스
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 호출 주의 사항
서브클래스에서 constructor을 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 함
// 수퍼클래스
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. 표준 빌트인 생성자 함수 확장