[코어 자바스크립트] 클래스

Overview

• 책 정보

  • 제목: 코어 자바스크립트
  • 저자: 정재남
  • 출판사: 위키북스
  • ISBN: 9791158391720
  • 발행일: 2019년 09월 10일
  • 쪽수: 202쪽

• 이 글의 목적 및 대상 독자

  1. JavaScript의 클래스 개념과 동작 원리를 이해하고 싶은 분
  2. 생성자 함수 패턴과 ES6 class 문법의 차이를 알고 싶은 분
  3. 클래스 상속, super 호출, constructor 복구 등 심화 내용을 실습해 보고 싶은 분

---

1. 클래스와 인스턴스의 개념 이해

1.1 클래스란?

클래스는 “비슷한 성격의 객체를 찍어내기 위한 설계도” 역할을 합니다.
구조(속성)와 행위(메서드)를 한곳에 정의해, 같은 형태의 여러 인스턴스를 일관성 있게 만들 수 있죠.

1.2 인스턴스란?

인스턴스는 클래스라는 설계도로 실제로 생성된 객체를 의미합니다.
각 인스턴스는 자신만의 상태(프로퍼티)를 가지며, 클래스에 정의된 메서드를 공유합니다.

정의 한 줄 요약
클래스 = 설계도, 인스턴스 = 설계도로 찍어낸 객체

---

2. 자바스크립트의 클래스

2.1 생성자 함수 + 프로토타입 패턴

ES6 이전에는 함수와 프로토타입으로 클래스처럼 동작을 흉내 냈습니다.

// 생성자 함수
function User(name, age) {
  this.name = name;
  this.age = age;
}
// 공통 메서드는 prototype에 정의
User.prototype.info = function() {
  return `${this.name} (${this.age})`;
};

const u = new User('Lee', 30);
console.log(u.info()); // "Lee (30)"

• new User() → 빈 객체 생성 → this 바인딩 → proto가 User.prototype 참조

u.__proto__  
 └─ User.prototype  
     └─ Object.prototype  
         └─ null

---

3. 클래스 상속

3.1 기본 구현

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
  Animal.call(this, name); // super 역할
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // constructor 복구
Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const d = new Dog('Rex');
d.speak(); // "Rex barks."

3.2 인스턴스 데이터 분리

• 주의: 프로토타입에 배열·객체를 두면, 모든 인스턴스가 공유하므로 인스턴스별 상태는 반드시 생성자 내부(this.)에 정의하세요.

3.3 constructor 복구하기

• Dog.prototype = Object.create(Animal.prototype) 하면
  Dog.prototype.constructor가 사라집니다.
• 반드시 Dog.prototype.constructor = Dog로 재설정해야 올바르게 식별됩니다.

3.4 상위 클래스 접근 방법

• ES5 패턴: Animal.prototype.method.call(this, …)
• 체인 구조:

d.__proto__  
 └─ Dog.prototype  
     └─ Animal.prototype  
         └─ Object.prototype  
             └─ null

---

4. ES6의 클래스 및 클래스 상속

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 반드시 호출해야 this 사용 가능
  }
  speak() {
    super.speak(); // 부모 메서드 호출
    console.log(`${this.name} barks.`);
  }
}

const d2 = new Dog('Buddy');
d2.speak();
// "Buddy makes a noise."
// "Buddy barks."

💡 Tip

• extends 사용 시 프로토타입 체인이 내부에서 자동 설정됩니다.
• super(...) 는 생성자 내에서만, super.method() 는 클래스 메서드 내부에서만 사용 가능합니다.

---

5. 정리

• 클래스 vs 인스턴스: 클래스는 설계도, 인스턴스는 찍어낸 객체
• ES5 패턴: 생성자 함수 + prototype → 수동 상속 설정
• ES6 문법: class / extends / super 로 가독성↑ 유지보수↑
• 주의점:
  • 프로토타입에 상태값(객체/배열) 두지 않기
  • 상속 후 constructor 복구하기

---

참고 문헌 및 링크

• 『코어 자바스크립트』 정재남, 위키북스
• MDN: Classes
• JavaScript.info: Classes