Prototype 프로토타입 : 상속....상속...상속!!

자바스크립트는 객체지향언어인가요?

아닙니다. 하지만 멀티패러다임 언어 입니다.

객체지향으로 작성할수도있고 안할수도 있다. 

 

자바스크립트는 프로토타입 기반 언어입니다. 

 

상속을 구현할수있는 문법 =프로토타입

 

 

생각보다 엄청 어려웠던 개념! mdn을 여러번 반복해서 읽어도 어려운 개념이다.

블로그를 정리하면서 내 머릿속에서도 개념이 더 잘정리되길 바라며

let's go!

 

프로토타입이란? 

 

유전자!!!

메소드와 속성을 상속받기위한 템플릿

 

프로토타입 === 유전자 (원형객체)

상속되는 속성과 메소드들은 각 객체가아닌, 객체의 생성자!! prototype라는 속성에 정의되어있다. 

 

prototype에 값을 추가하면 모든 자식들이 물려받기가 가능하다. 

__proto__를 통하여 prototype 객체를 볼 수 있다.

 

 

프로토타입체인.

예를 통해 알아보자

 

아래와 같은 클래스와 인스턴스를 만들어보았다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let chaeyounglee = new Human('이채영',30)

 

콘솔로그에 찍어보자! 인스턴스. 새로운 객체를 확인할수있다.

console.log(chaeyounglee) // Human {name: '이채영', age: 30}

콘솔dir을 해보자.

 

오잉? Dir을 해보니 prototype을 확인할수가있다.

좀더 자세히 들여다보자.

내부를 살펴보면 prototype을 통하여 Human으로 부터 상속받은 prototype를 찾아낼수있다.

 

__proto__를 통하여 prototype 객체를 볼 수 있다.

 

 

변수에  __proto__를 붙여 보니  위에서 볼수있었던 [[prototype]]부분이 추출되었다.

이말은 즉  "__proto__를 통하여 prototype객체를 볼수있다." 는 말이다.

 

ㅍ

 

 

 

프로토타입은 연결되어있다.

이 개념은 그냥 찍어보며 확인해봐야 이해할수있다.ㅠㅠ

 

 

chaeyounglee.__proto__ === Human.prototype 이 true 며

=> 주소값을 참조한다. 빌려쓴다. 라고 생각하자

human.prototype.constructor === human이 true 이다.

 

이렇게 체인으로 연결되있는 개념이 프로토타입 체인이다.

 

 

protype은 상속받기위한 템플릿이다.

그렇다면

하기의 차이점은 무엇일까? 

object.assign()

object.prototype.__defineGetter_()

 

정답 !! 상속!

프로토타입의 속성 : 상속받은 멤버들이 정의된곳.

프로토타입 버킷에 정의되지않은것들은 상속이 불가능하다.

그러므로 object안에서만 사용이 가능하다.