[D+53] Prototype Chain

 

 

D+53

-  Prototype Chain -

(prototype, __ proto__, constructor의 관계

Object.create(), class와 super)

 

---

 

 

prototype, __proto__, constructor의 관계

 

 

prototype

함수 func를 생성후 fuc의 prototype을 불러온 모습

 

모든 함수에는 프로토타입이라는 속성이 존재하는데,

이로 인해서 우리는 prototype을 통해서 메서드를 정의할 수 있다.

 

프로토타입에 메소드를 만든 모습

 

또한 prototype은 같은 생성자로부터 만들어진 인스턴스 객체들은 prototype을 통해 공유가 가능하다.

 

또한 우리가 MDN을 통해서 메소드를 검색할 경우 항상 저렇게 prototype이 붙어 있는 것을 확인할 수 있는데

이는 함수의 원형에 붙어있는 메소드이기 때문에 prototype이 붙어 있는 것이라고 할 수 있다.

 

__proto__

prototype에 대해서 알아보았을때 궁금한 것이 생겼을 것이다.

 

바로 저 __proto__는 무엇을 나타내는 것일까에 대한 궁금증 말이다.

 

__proto__은 프로토타입 체인으로 연결된 부모 객체를 반환하는 것으로,

위의 이미지에서는 func의 부모객체는 Object라는 것을 알려준다.

 

constructor

constructor은 생성자라는 의미로 인스턴스가 초기화될 때 실행하는 생성자 함수이다.

 

 

 

---

Object.create()

var Human = function(name) {
	this.name = name;
}

Human.prototype.sleep = function() {};

var steve = new Human('steve');

var Student = function(name) {

}

Student.prototype.learn = function() {};

var john = new Student('john');
john.learn();
john.sleep(); // ??????????

Human은 sleep이라는 메소드를메서드를 가지고 있고 Student는 learn이라는 메서드를 가지고 있다.

 

이때, Human에 steve라는 인스턴스를 생성하였고

Student에는 john이라는 인스턴스를 생성하였다.

 

여기서 john은 Student의 learn메소드를 사용할 수 있는데

이때 만약 Human의 sleep 메소드도 사용하고 싶다면 어떻게 해야 할까?

 

이때는 Student가 Human을 참조해야 하므로 참조하는 메서드를 사용해줘야 하는데

그것이 바로 Object.create()이다.

 

 

1) Object.create()

Student.prototype = Object.create(Human.prototype);
Student.prototype.learn = function() {};

Object.create()를 사용하는 방법은 복사할 프로토 타입에 Object.create를 사용해 주면 되는데

이때 Object.create() 괄호 안에는 복사할 프로토타입을 넣어주면 된다.

 

우리는 Student에 Human을 복사할 것이기 때문에 위에 해당 코드처럼 입력해 주면 된다.

 

 

2) 생성자의 중요성

1번까지 진행을 해주면 Human을 참조할 수 있지만 한 가지 오류가 있다.

 

원래라면 student1의 부모 객체 생성자는 Student가 나와야 하지만

이상하게도 Human이 나와버린다.

 

이는 우리가 Object.create()를 통해 Human을 복사해버리면서 생성자도 가져왔기 때문에 발생한 것인데

이를 해결하는 방법은 Student.prototype의 생성자가 Student라는 것을 알려주면 된다.

 

Student.prototype.constructor = Student;

 

바뀌어진 것을 확인할 수 있다.

 

3) context 전달

2번까지 진행해주었다고 끝난 것이 아니다.

 

new키워드를 사용해 인스턴스를 생성해줬을 때 Human으로 context가 전달이 안되어 버린다.

 

이때에 우리는 call을 사용해 줘서 Human으로 까지 잘 전달될 수 있도록 해주면 된다.

 

 

 

---

class와 super

방금 우리가 만든 코드는 pseudoclassical 한 방법으로 제작한 코드이다.

 

하지만 이러한 방법은 개념을 이해하기 위해 사용되지 평소엔 잘 사용되지 않는다.

 

우리는 클래스 방식을 사용해 더욱 쉽고 간단하게 문제를 해결해 나갈 수 있다.

 

기존에 사용한 키워드에서 class로 변경해주고

생성자는 따로 해줄 필요 없이 Human 클래스 안에다가 constructor를 사용해 입력해 주면 된다.

 

또한 Student 클래스가 Human을 상속받기 위해서 extends만을 입력해 주면 되고

물려받을 name에 관한 정보도 super를 이용해 주면 훨씬 간단하지만

같은 기능을 하는 코드가 완성된다.