[💻 코드스테이츠 FE 44기][part 4] 프로토타입 체인

✔️ 시작

프로토체인이 무엇인지, .prototype ,__proto__ 키워드에 대해 학습 했다.

프로토타입 체인을 알기전 프로토타입이 무엇인가에 대해 짚고 넘어가야한다.

프로토타입이란 간단하게 말하자면
프로토타입 = 원형객체(original form) = 부모 객체 유전자

부모 유전자 기록(속성, 메서드)을 가져다 사용할 수 있다.

📍 프로토타입 체인

상위 프로토타입 객체로 부터 메서드와 속성을 상속 받는다. 그 상위 프로토타입 객체도 마찬가지다. (부모 유전자 상속)

prototype 와__proto__

prototype, __proto__ 의 공통점은 둘 다 prototype을 가리킨다.

function person(){}

persen 함수를 생성할 경우
person과 person's prototype이 생성된다.
person은 자동으로 prototype을 생성 되며
person's prototype을 가리키게 된다.

let kim = new person();

여기서 인스턴스 객체를 생성할 경우
kim에 자동으로 __proto__가 생성되며 이 또한 person's prototype을 가리키게 된다.

- .prototype (생성자의 속성)

부모 객체의 속성으로 prototype의 객체를 가리킨다.

- .__proto__ (개별 객체의 속성)

인스턴스 객체(자식 객체)의 속성으로 부모의 prototype의 객체를 나타 낸다.

📍 상속 구현 방법

- 자식 클래스 extends 부모 클래스 {...}

부모 클래스를 상속받은 자식 클래스를 만들 수 있다.

- super

부모 객체의 함수를 호출한다.(부모가 가지고 있는 기능을 가져옴)

• super() : ()가 있을 경우 부모 클래스 생성자를 가져온다.
• super. : .가 있을 경우 부모 클랙스 객체를 가져온다.

class 부모 클래스{
	constructor(color, food){
      this.color = "red";
      this.fodd = "apple";
    }
}

자식 클래스 extends 부모 클래스{
	constructor(name, color, food){
      super(color, food); // 부모 클래스 상속
      this.name = "jieun";
      /*
      부모 속성이 자동으로 상속된다.
      this.color = "red";
      this.fodd = "apple";
      */
    }
}

• 자식 클래스에 super로 부모 클래스의 속성들을 추가할 경우
  따로 선언하지 않아도 부모 클래스의 속성을 사용할 수 있다.

✏️ 마치며

프로토타입 체인이 무엇이고 .prototype와 ,__proto__의 차이점에 대해 알 수 있었다.

.prototype와 __proto__ 은 서로 공통점은 있지만
부모, 자식의 속성이라는 차이점이 있는 거 같다.

공부할 때 참고하기 좋은 영상
🔗 https://youtu.be/wT1Bl5uV27Y