[Deep Dive CS - Q22] Prototype Chain

Q22. 아래 코드의 실행 결과를 예측하고, dog 인스턴스가 bark 메서드를 찾아가는 과정을 '프로토타입 체인' 관점에서 설명해주세요.

function Animal() {
  this.type = "Mammal";
}
Animal.prototype.move = function() { console.log("Moving..."); };

function Dog(name) {
  this.name = name;
}

// 상속 구현 (ES5 스타일)
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // (A)

Dog.prototype.bark = function() { console.log("Woof!"); };

const dog = new Dog("Pochi");

console.log(dog.type); // (1) 출력값?
dog.move();            // (2) 실행 여부?
console.log(dog.constructor); // (3) (A)줄이 없다면 뭐가 출력될까?

 

 

일반적으로 상속은 복사(Copy)이지만, 자바스크립의 상속은 연결(Link)이다.

1. JAVA의 상속 : "붕어빵 틀과 늘어나는 붕어빵들(복제)"

자바에서 클래스를 배우면 선생님이 늘 "클래스는 붕어빵 틀을 만드는 거고, 객체는 생성된 붕어빵들이야" 이 붕어빵 틀만 있으면 얼마든지 붕어빵을 만들 수 있다고 설명하십니다. 

 

2. 자바스크립트(JS)의 상속 : "줄 줄이 소시지 (연결)"

자바스크립트에는 클래스가 원래는 없었고, 그냥 객체랑 객체를 서로 끈으로 연결시키서 사용했습니다. 

이것이 바로 프로토타입 체인(Prototype Chain) 입니다. 상속이라기 보단, 없으면 윗사람한테 빌려쓰기(위임)에 가깝습니다. 
"부모를 고치면, 이미 태어난 자식들도 바뀐다"

 

😵‍💫 가장 헷갈리는 두 용어 : prototype VS __proto__

• prototype (유전자 원본)
  - 함수(function)만 가짐
  - "나중에 new로 내 자식을 만들면, 이 유전자를 물려줄 거야"라고 보관하는 창고.
• __proto__ (내 부모님 연결고리)
  - 모든 객체가 가짐. 
  - "내 실제 부모님은 저기에요." (포인터)

 

[정답]

1. undefined 
2. Moving... 
3. Animal 

[해설]

1. ES5에서는 자식 생성자가 실행될 때 부모 생성자를 자동으로 호출해주지 않습니다. 비록 Animal 함수 자체는 호이스팅되어 메모리에 존재하지만, Dog 생성자 내부에서 Animal.call(this) 등으로 명시적 호출을 하지 않았기 때문에, Animal 함수 본문(Body)은 실행된 적이 없습니다.

즉, this.type = "Mammal"이라는 코드 자체가 실행되지 않았으므로, dog 인스턴스에는 type이라는 프로퍼티가 생성되지 않았고, 결과적으로 접근 시 undefined가 나옵니다

2. 2번은 dog에서 move 함수를 찾고 없으면 부모의 move함수를 찾습니다. 이때 부모에 정의된 move 함수를 호출합니다. 

3. 프로토타입 객체를 통째로 교체(=)해버리면, 기존에 있던 '나는 누구의 자식이다'라는 constructor도 같이 날아가 버립니다. 그래서 페인을 타고 올라가다가 가장 먼저 만나는 Animal이 찍히는 것입니다.