상속과 프로토타입

프로토타입 기반 상속

js에서 모든 객체는 다른 객체를 프로토타입으로 가진다.

// 부모 생성자 함수
function Parent(name) {
    this.name = name;
}

// 부모 메서드 추가
Parent.prototype.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
};

// 자식 생성자 함수
function Child(name, age) {
    Parent.call(this, name); // 부모 생성자 호출
    this.age = age;
}

// 프로토타입 체인 설정
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 생성자 링크 재설정

// 자식 메서드 추가
Child.prototype.sayAge = function() {
    console.log(`I'm ${this.age} years old`);
};

const child = new Child('Alice', 5);
child.sayHello(); // Hello, I'm Alice
child.sayAge();   // I'm 5 years old

1.자식 생성자 함수 정의

이 단계에서는 부모 생성자 함수를 호출하여 상속된 속성을 초기화 한다.

여기서 Parent.call(this, name)의 역할은 다음과 같다:

1. Parent 생성자 함수를 호출하여 부모 객체의 초기화를 수행합니다.
   위 코드는 this객체를 parent의 this로 지정했습니다. parent(name)으로 함수가 호출되며 즉 자식의 name이 부모의 name으로 가고
   자식의 this는 부모의 this와 연결됩니다.

2. this를 사용하여 자식 객체의 속성을 초기화합니다. 이로써 자식 객체는 name 속성을 갖게 됩니다.

3. this.age = age;를 통해 자식 객체에 age 속성을 추가합니다.
   결과적으로, Child 생성자 함수를 통해 생성된 객체는 부모 객체의 속성과 메서드 뿐만 아니라 자식 객체만의 속성도 가지게 됩니다. 이렇게 상속과 속성 초기화가 이루어지는 것입니다.

2. 프로토타입 체인 설정

이 단계에서는 자식 객체의 프로토타입 객체를 부모객체의 프로토타입 객체로 설정하여 상속을 구현한다.
위에서 new Parent()를 자식 프로토타입에 할당하지 않고 Object.create()를 사용한 이유는 다음과 같다.

1. 부모객체와 자식객체 인스턴스의 의도치않은 연결을 방지하기 위해
2. 생성자를 활용하면 속성 초기화가 이루어지는데 이를 방지하고 순수 프로토타입 체인 설정만 하기 위해
3. 부모 객체의 프로토타입을 공유하여 부모 프로토타입 속성 메서드를 바로 사용할 수 있기 때문
4. 단순 프로토타입 객체만 생성하여 효율적

이후 자식 프로토타입의 생성자를 자식으로 하는 이유는 프로토타입을 연결하여 자식의 생성자도 부모 생성자 함수를 가리키게 되었기 때문이다.
이를 해결하기 위해 명시적으로 자식 프로토타입 생성자에 자식 생성자 함수를 대입해 주어야 한다.