[스터디] prototype에 대해

 

오늘 내가 맡은 파트는 프로토타입에 대한 것!!

프로토타입을 간단하게 설명해보자~~😎

프로토타입이란?

javascript에서 기본 데이터 타입을 제외한 모든 것은 객체인데, 이 객체가 만들어지는 원리는 자신을 만드는 데 사용된 원형의 프로토타입 객체를 이용한다.. 라고 하는데, 쉽게 말하자면 모든 객체는 자신의 부모 객체와 연결되어 있고, 이 프로토타입을 이용해 객체지향의 상속처럼 속성을 사용할 수 있게 해준다는 말이다. 더~~ 쉽게 말하면 프로포타입 == 유전자라고 생각하면 쉽다!

코드로 말하면 다음과 같다.

function 부모(){
    this.home = 'seoul';
}

부모.prototype.name = 'lee';

let 자식= new 부모();

• 부모가 자식에게 집을 물려줌. 그래서 사진처럼 자식을 입력해보면 부모가 물려준 집이 있음.

• 부모.prototype.name을 추가해주면, 자식은 부모의 유전자로 생성된 애라서 name을 끌어 쓸 수 있음 (상속 기능을 구현)

• 위 둘의 차이점은
  • f()부모가 물려준 거면 자식이 직접 집을 가질 수 있음.
  • 부모한테 추가해준 정보(부모.prototype.name)는 부모만 직접적으로 가지는 거고, 자식은 그걸 끌어다만 쓸 수 있음. 직접 가지지는 못함.

Q. 근데 부모 유전자에 있는 것(name)을 어떻게 자식이 사용 가능해?

A. 프로토타입 체인이 동작함.

1. 자식이 일단 이름(성)을 가지고 있는지 부터 검사
2. 자식한테 이름이 없어? 그럼 얘를 태어나게 한 부모한테 가서 이름이 있는 지 검사하고, 있으면 그걸 끌어오는 것.
3. 만약 부모한테 이름이 없어..? 그럼 그 부모를 탄생하게 한 조부모님까지 검사한다👴🧓

Q. 그럼 내가 자식의 프로퍼티(속성)에 name을 추가해줬어, 그러면 어떻게 되지?

function 부모(){
    this.home = 'seoul';
}

부모.prototype.name = 'lee';

let 자식= new 부모();

자식.name = 'leeny';

A. 그럼 프로토타입 체인이 동작을 안 함.

위의 상황과 다르게 지금은 자식 객체에 name 프로퍼티가 없는 걸 보고, leeny라는 값을 할당하고 그걸 보여줌.

프로토타입 체인이란?

위에서 쉽게 설명한 것을 어렵게 말해보자면,

js가 특정 객체의 프로퍼티나 메소드에 접근하려고 하는데, 해당 객체에 프로토타입이나 메소드가 없으면 [[prototype]]이 가리키는 곳(자신의 부모 역할을 하는 프로토타입의 객체)의 프로퍼티나 메소드를 차례대로 검사하는 것을 prototype chain이라고 함.

• 동작 조건은?
  • 객체의 프로퍼티를 참조하는 경우, 해당 객체에 프로퍼티가 없는 경우에 프로토타입 체인이 동작
• 동작하지 않을 땐?
  • 객체의 프로퍼티에 값을 할당하는 경우, 프로토타입 체인이 동작하지 않는다. 이는 객체에 해당 프로퍼티가 있는 경우, 값을 재할당하고 해당 프로퍼티가 없는 경우는 해당 객체에 프로퍼티를 동적으로 추가하기 때문

근데요~ [[prototype]] 이게 뭐죠?

자바스크립트의 모든 것은 뭐다? 객체다. 자바스크립트의 모든 객체가 가지고 있는 것이 [[prototype]]. 이걸 ‘프로토타입 링크’라고 한다.

[[prototype]]는 proto로 접근할 수 있고, 얘를 통해서 조상 객체, 즉 자신을 만든 객체의 원형 정보를 볼 수 있다.

 

Q. constructor는 뭔가요?

constructor 프로퍼티는 객체의 입장에서 자신을 생성한 객체를 가리키는 애

→ 우리 예제 코드상으로 따졌을 때, ‘자식’을 생성한 ‘부모’를 가리킴!

프로토타입, 그래서 왜 사용해??

js는 프로토타입을 기반으로 상속을 구현해서 불필요한 중복을 제거하는데, 중복을 제거하는 효과적인 방법은 기존의 코드를 재사용하는 것이기 때문임.

→ 만약 10개의 인스턴스를 생성하면 내용이 동일한 메소드 또한 10개 == 동일한 메소드를 중복 소유한다는 것은 메모리를 불필요하게 낭비 → 결론적으로 퍼포먼스에 악영향

(+)대표적인 프로토타입의 예시??를 생각해보면?🤔

Array 자료에 .sort()를 우리가 만들지도 않았는데, 어떻게 사용할 수 있을까? 이런 게 있네용🤗

→ Array라는 부모의 유전자에 다 기록이 되어있으니까욘😏

---

참고자료

https://www.nextree.co.kr/p7323/

https://www.youtube.com/watch?v=wUgmzvExL_E

https://velog.io/@zigje9/프로토타입Prototype

https://poiemaweb.com/js-prototype