코어 자바스크립트 | 챕터 7: 클래스

[클래스]

<클래스와 인스턴스 개념 이해>
음식 - 과일 - 귤류(감귤,오렌지,자몽,레몬 등)
super-superclass / superclass / subclass

어떤 클래스의 속성을 지니는 실존하는 개체를 인스턴스라고 한다

한 인스턴스는 하나의 클래스를 기반으로 바탕으로 만들어진다. 어떤 인스턴스가 다양한 클래스에 속할 수는 있지만 이 클래스들은 모두 인스턴스 입장에서 '직계 존속'이다
인스턴스를 생성할 때 호출할 수 있는 클래스는 하나일 수 밖에 없기 때문이다

🌱 문장 해석부터 차근차근

❓ 원문

"한 인스턴스는 하나의 클래스를 기반으로 바탕으로 만들어진다. 어떤 인스턴스가 다양한 클래스에 속할 수는 있지만 이 클래스들은 모두 인스턴스 입장에서 '직계 존속'이다. 인스턴스를 생성할 때 호출할 수 있는 클래스는 하나일 수밖에 없다."

💡 의미 정리

1. "한 인스턴스는 하나의 클래스를 기반으로 만들어진다"
   • 인스턴스를 만들려면 new 키워드로 딱 하나의 클래스만 호출할 수 있다는 뜻이에요.
   • 예: new Student()처럼요.
2. "다양한 클래스에 속할 수 있다"
   • 자바스크립트에서는 상속(상위 클래스 → 하위 클래스)을 통해
     하나의 인스턴스가 여러 클래스의 성질을 "물려받은 것처럼" 보일 수 있어요.
3. "이 클래스들은 모두 직계 존속이다"
   • 이건 상속 관계에서 위로 올라가는 부모들을 말하는 거예요.
   • 자식 → 부모 → 조부모 ... 식으로 한 줄로 연결된 계보처럼요.
4. "인스턴스를 생성할 때 호출할 수 있는 클래스는 하나뿐"
   • new Child()를 호출하면 인스턴스는 Child로부터 만들어지는 것이고,
   • 그 위의 부모 Parent, 조부모 Object는 물려받는 구조이지,
     동시에 여러 클래스를 "동시에" 기반으로 삼는 건 아니라는 뜻이에요.

---

📌 예시로 풀어보기

js

복사편집

class Animal { speak() { console.log("동물이 말해요"); } } class Dog extends Animal { bark() { console.log("멍멍!"); } } const puppy = new Dog();

이제 puppy는...

• Dog 클래스에서 만들어졌고 (new Dog() 호출)
• Dog는 Animal을 상속했으므로,
• puppy는 Dog 뿐 아니라 Animal의 기능도 사용 가능해요.

js

복사편집

puppy.bark(); // 멍멍! puppy.speak(); // 동물이 말해요

하지만 puppy는 Dog 클래스 하나로만 만들어졌어요.
그 위의 Animal, Object는 그저 상속받은 조상들일 뿐이에요.

---

🧬 비유로 표현하면...

"너는 사람이고, 사람은 포유류고, 포유류는 동물이다.
하지만 너를 만들 때는 부모(사람)를 통해 태어난 거지,
너를 만든 게 '사람+포유류+동물'이 동시에 작용한 건 아니야."

이렇게 보시면 돼요 😊

<자바스크립트의 클래스>
자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다. 다만 프로토타입을 클래스와 비슷하게 해석할 수는 있다

생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 호출된다. Array를 클래스라 보면 Array의 prototype 객체 내부 요소들이 인스턴스에 '상속'된다고 볼 수 있다

인스턴스에 상속되는지 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉜다
다만 자바스크립트는 인스턴스 에서도 메서드를 정의할 수 있기 때문에 '프로토타입 메서드'라고 많이 부른다



프로토타입 객체에 할당한 메서드는 인스턴스가 마치 자신의 것처럼 호출할 수 있다
이것처럼 인스턴스에서 호출할 수 있는 메서드를 프로토타입 메서드라고 한다

인스턴스에서 직접 접근할 수 없는 메서드를 스태틱 메서드라고 한다


<클래스 상속>
프로토타입 체인을 활용해 클래스 상속을 구현하기
(ES5 때, 예전에는 이렇게 해왔구나~)

클래스가 구체적인 데이터를 지니지 않게 하는 방법
1. 만들고 나서 프로퍼티 들을 일일이 지우고 더는 새로운 프로퍼티를 추가할 수 없게 하는 것이다

2. 빈 생성자 함수를 하나 더 만들어서 prototype이 SuperClass의 prototype을 바라보게끔 한 다음, subClass의 prototype에는 빈 생성자 함수의 인스턴스를 할당하게 하는 것

3.Object.create를 이용하는 것


constructor 복구하기
~이후 내용은 2회독 때 추가해보겠음~



<ES6의 클래스 및 클래스 상속>
클래스
var ES6 = class {
    constructor (name) {
        this.name = name;
    }

    static staticMethod () {
        return this.name + 'staticMethod';
    }

    method() {
        return this.name + "method";
    }
};

var es6Instance = new ES6('es6');
console.log(ES6.staticMethod());
console.log(es6Instance.method());

클래스 상속
extends 상속할거
super라는 키워드를 함수처럼 사용해서
SuperClass의 constructor를 실행한다

super.getArea() 
super라는 키워드를 객체처럼 사용할 수도 있다
호출한 메서드의 this는 'super'가 아닌 원래의 this이다


<정리>
클래스: 어떤 사물의 공통 속성을 모아 정의한 추상적 개념
인스턴스: 클래스의 속성을 지니는 구체적 사례
상위 클래스(superclass)의 조건을 충족하면서 더욱 구체적인 것을 하위클래스라고 한다(subclass)

클래스 prototype 내부에 정의된 메서드를 프로토타입 메서드라고 하며, 인스턴스가 마치 자신의 것처럼 호출할 수 있다
클래스에 직접 정의한 메서드를 스태틱 메서드라 하며 인스턴스가 직접 호출할 수 없고 클래스에 의해서만 호출할 수 있다

ES6에서는 상당히 간단하게 처리되지만
ES5이하에서 클래스 상속을 흉내내려면
1. SubClassprototype에 SuperClass의 인스터스를 할당한 다음 프로퍼티를 모두 삭제
2. 빈 함수를 사용
3. Object.create를 이용
(construtor 프로퍼티가 원래 생성자 함수를 바라보도록 조정해야함)