프로토타입의 교체.

모던 자바스크립트 딥다이브의 19장 프로토타입 중에서 #9프로토타입의 교체에서 6페이지의 분량

전체 프로토타입 분량중에서도 1/10정도 되는 양이고

책 전체로 따지면 1.5% 정도 되는 분량일거다.

근데 나는 이걸 이해하려고 30분이 걸렸다..

그치만 나의 빡대갈은 언제 또 까먹을지 모른다.

힘들게 이해한거 까먹기 전에 정리를 해보자

 

프로토타입의 교체

포로토타입은 다른 객체로 변경이 가능함.

즉 객체간의 상속관계를 변경할 수 있음

생성자함수 or 인스턴스에 의해 교체가능함.

 

생성자함수에 의한 프로토타입의 교체.

//생성자 함수 
const Person = function (name) {
    this.name = name;
  };
  
  //객체 생성
  const me = new Person('Lee');
  console.log(me);  // Person {name : 'Lee'}

우선 생성자 함수를 통해 객체를 생성한다.

 

console.log(Person.prototype.constructor === Person); // true

console.log(me.constructor === Person);  // true

console.log(me.constructor === Object); // false

constructor 프로퍼티는 생성자함수를 가리킨다.

생성자 함수로 생선된 객체 me에는 constructor프로퍼티가 없지만,

프로토타입 체인을 통해 Person 프로토타입에서 constructor 프로퍼티를 발견하고,

제것 마냥 사용한다. 

부모 자식 관계라는 표현을 책에서 봤는데

잘지은것 같다. 자식들도 부모의 것이 제것인마냥 갖다쓰고 그러니까..

constructor를 Person의 프로토타입에서 찾았기 때문에

당연히 Object와는 일치하지 않는다.

 

//Person의 프로토타입을 빈 객체로 변경
Person.prototype = {};

console.log(Person.prototype.constructor === Person); // false

console.log(me.constructor === Person); //false

console.log(me.constructor === Object);  //true

 

Person의 프로토타입을 빈 객체로 변경하였다.

그리고 Person의 프로토타입 안에는 constructor가 더이상 없으니 당연히 Person과 일치하지 않는다.

me 에서 constructor를 찾으면 프로토타입 체인을 따라 Person에서 먼저 찾아보지만 발견하지 못하고,

프로토타입의 프로토타입인 Object.prototype에서 constructor를 발견한다.

Object.prototype.constructor는 생성자함수인 Object를 가리키고 있다.

즉, me.constructor는 Object와 일치한다.

 

// Person 프로토타입 안에 constructor를 생성자함수인 Person을 다시 가리키게 한다.
Person.prototype = {
    constructor: Person,
  };
  
  console.log(Person.prototype.constructor === Person); // true
  
  console.log(me.constructor === Person); // true
  
  console.log(me.constructor === Object); // false

 

요렇게 Person의 프로토타입에 constructor를 넣어주고, Person 을 가리키게 해줄수 있다.

 

 

인스턴스에 의한 프로토타입 교체.

 

const changePrototype = {};

me.__proto__ = changePrototype; 
//👆👆Object.setPrototypeOf(me, changePrototype); 과 동일한 코드

console.log(Person.prototype.constructor === Person); // false

console.log(me.constructor === Person); // false

console.log(me.constructor === Object); // true

 

이번엔 빈 객체를 하나 만들고

me.__proto__ 에 재할당을 해줬다.

생성자함수로 프로토타입을 교체했을 때와 같은 결과가 출력된다.

 

두 방법의 차이점

사실 결과만 놓고 보면 비슷.. 아니 똑같다.

그런데 안쪽을 자세히 들여다 보면 차이점이 분명히 존재한다.

생성자함수에 의해 프로토타입을 변경하게 되면,

생성자함수의 프로토타입 프로퍼티가 교체된 프로토타입을 가리키지만,

인스턴스에 의해 프로토타입을 변경하게 되면,

생성자함수의 프로토타입 프로퍼티가 교체된 프로토타입을 가리키지 않는다.

솔직히 뭔 상관인가 싶다...

 

여기 까지가 내가 몇번씩 읽고 그림까지 그려가며 열심히 이해한 부분이다.

이 챕터를 이해하고 나니, 그 뒷부분을 읽는것이 조금 더 수월해졌다.

음 조금 수월해졌다 했지 쉬웠다곤 안했다..!

 

그런데 이렇게 열심히 이해를 했는데 이 챕터의 마지막에 있는 문장이 날 맥빠지게 하더라..

프로토타입 교체를 통해 객체간의 상속관계를 동적으로 변경하는 것은 꽤나 번거롭다.

따라서 프로토타입은 직접 교체하지 않는것이 좋다.

 

..ㅎㅎ 선생님 이런건 챕터 앞부분에 넣어주셔도 좋았을텐데..

예를 들자면,

아래 내용은 번거롭고 잘 사용도 안되지만, 이해해두면 앞으로의 내용을 이해하는데 큰 도움이 될것임.

라고 말이지...

뭐.. 그래도 그 이해안되고 답답한 기분에서 

이해가 탁 되면서 머리가 명쾌해지는 느낌이 매우 좋았다.

이맛에 공부하나 싶다.