모던 자바스크립트 Deep Dive - 25장 클래스

✏️ class란?

• 클래스란 객체를 생성하기 위한 템플릿이다. 클래스는 속성과 메서드를 포함하여 이를 통해 객체의 상태와 동작을 정의한다.
• 클래스를 설명하기 위해 보통 붕어빵과 연관지어 설명을 한다.
• 붕어빵을 만들 때 붕어빵 틀에 재료들을 넣고 만든다.
• 여기서 붕어빵 틀이, 만들어진 붕어빵이 인스턴스다.

🙋‍ 틀을 사용하면 비슷한 형태의 붕어빵을 여러개 만들 수 있듯이, 클래스를 사용하면 동일한 구조와 기능을 가진 여러 객체를 생성할 수 있다.

인스턴스 생성

class Person{
	constructor(name, age){
    	this.name = name;
      	this.age = age;
    }
}

const me = new Person("sungu", 28); 
console.log(me) // Person {name: 'sungu', age: 28}age: 28name: "sungu"[[Prototype]]: Object

constructor

• constructor는 인스턴스를 생성하고 초기화 하기 위한 특수한 메서드다.
• constructor는 이름을 변경할 수 없다.
• 2개 이상의 constructor를 사용하면 문법 에러가 발생한다.

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

class Bungeoppang {
  constructor(shape, size, filling) {
    
    this.shape = shape;
    this.size = size;
    this.filling = filling;
  }

  eat() {
    console.log(`${this.size} 크기의 ${this.shape} 모양 붕어빵을 먹고 있습니다. 속재료: ${this.filling}`);
  }
}

const myBungeoppang = new Bungeoppang('붕어', '중간', '팥');

1. 인스턴스 생성과 this 바인딩: 붕어빵 틀을 사용하여 붕어빵을 만들기 시작하는 단계

• new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 클래스가 생성한 인스턴스다.
• 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다.
• 따라서 constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킨다.

2. 인스턴스 초기화: 붕어빵 틀에 반죽과 속재료를 넣고 굽는 단계

• this에 바인딩 되어 있는 인스턴스를 초기화한다.

3.인스턴스 반환: 완성된 붕어빵을 틀에서 꺼내는 단계

• 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

클래스 상속

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

프로토타입 기반 상속 예제

const Animal = {
  speak() {
    console.log(`${this.name}가 소리를 냅니다.`);
  }
};
// Animal을 프로토타입으로 하는 객체 생성
const dog = Object.create(Animal);
dog.name = '바둑이';
dog.bark = function() {
  console.log(`${this.name}는 멍멍 짖습니다.`);
};
dog.speak(); // 바둑이가 소리를 냅니다.
dog.bark();  // 바둑이는 멍멍 짖습니다.

프로토타입 기반 상속은 JavaScript의 근본적인 상속 방식으로, 객체 간의 직접적인 프로토타입 연결을 통해 상속을 구현한다.

클래스 기반 상속 예제

// 부모 클래스 정의
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  }
}
// Animal 클래스를 상속받는 Dog 클래스 정의
class Dog extends Animal {
  constructor(name, breed) {
    // 부모 클래스의 생성자 호출
    super(name);
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name}는 멍멍 짖습니다.`);
  }
  // 추가 메소드 정의
  fetch() {
    console.log(`${this.name}가 물건을 가져옵니다.`);
  }
}
// 인스턴스 생성
const myDog = new Dog('바둑이', '진돗개');
myDog.speak(); // 바둑이는 멍멍 짖습니다.
myDog.fetch(); // 바둑이가 물건을 가져옵니다.

• 클래스 기반 상속은 ES6에서 도입된 문법으로, 클래스와 상속 키워드를 사용하여 보다 직관적이고 명확하게 상속 구조를 정의할 수 있다. 실제로는 프로토타입 기반 상속을 감추고 있지만, 개발자에게는 전통적인 객체 지향 프로그래밍의 장점을 제공한다.
• Dog 클래스는 extends Animal을 통해 Animal 클래스를 상속받는다.
  • 이를통해 Dog 클래스에서 Animal 클래스의 프로토타입을 사용할 수 있다.
• super는 메소드 오버라이딩 시 부모 클래스의 기능을 유지하거나 확장하는 데 사용할수 있다.