JavaScript

prototype

이번 수업은 상속수업의 연장선상에 있다. 상속의 구체적인 수단인 prototype에 대해서 자세히 알아보자.

prototype

그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 

function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp);

결과는 true다.

생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.

  1. 객체 o에서 ultraProp를 찾는다.
  2. 없다면 Sub.prototype.ultraProp를 찾는다.
  3. 없다면 Super.prototype.ultraProp를 찾는다.
  4. 없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.

Super.prototype = Ultra.prototype 으로하면 안된다. 이렇게하면 Super.prototype의 값을 변경하면 그것이 Ultra.prototype도 변경하기 때문이다. Super.prototype = new Ultra();는 Ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new Ultra()를 통해서 만들어진 객체에 변화가 생겨도 Ultra.prototype의 객체에는 영향을 주지 않는다.

댓글

댓글 본문
작성자
비밀번호
  1. 김명수
    너무 잘 듣고 있습니다. 감사합니다!
  2. sSll바버미니llSs
    감사합니다!!
  3. 왕초보
    너무너무 좋은 강의 감사하게 잘 듣고 있습니다.
    간혹 negative comment 가 있더라도 저희같이 정말 필요로 하는 사람들이 더 많이 있고 감사함을 많이 느끼고 있다는걸 잊지 말아주세요...
  4. 완료!
    완료! 감사합니다.
  5. Super.prototype = Ultra.prototype하면 안되는 거 이제 이해갑니다^^
  6. 취준생1
    개념이 확실하게 이해되지는 않지만 상속받는 방법은 알겠습니다. 감사합니다!
  7. egoing
    제가 수업을 만드는 이유는 권위자여서는 아니고 저도 배우는 사람의 입장에서 저애게도 공부가 되기 때문이랍니다. 그래서 지가 틀린 부분도 꽤 있을꺼예요. 저에게도 공부가 될 수 있도록 어떤 부분이 틀린지를 알려주시면 감사하게 듣겠습니다.수업은 같이 만들어가야죠~
    대화보기
    • 오미풍
      설명하시는 중에 틀리게 말씀하시는 경우가 적지 않네요..
    • 북괴
      첫번째동영상 크롬에서 하는거 아무리 똑같이쳐도 안되네요... 왜그런건가요... o를치면 아무것도없어요 ㅠㅠ
    • yihsang
      생활코딩 강의를 들을수있어서 행복합니다.
      감사합니다.
    • 카스테라는없다
      일단 일회독이니까... prototype이라는 기능을 이용해서 상속을 한다! 이것만 알아두고 다시 올게요 ㅜㅜ
    • interimlife
      으음...그러니깐....1회차 공부에서 이해한 느낌으로는... prototype이라는 변수는.....상속용 금고(?) 로 봐도 되는걸까요??
    • 이주환
      2016. 04. 25

      정말 중요한 내용인 prototype을 이해하기 쉬운 예제로 알려주셔서 감사합니다.
    • 프로토타입에 대해 그림으로 설명되어 있는 포스트입니다. 강의들고도 이해가 안되시는 분들은 참조하시면 도움이 될까해서 공유합니다. *^^*
      http://www.nextree.co.kr/p7323/
    • JustStudy
      고맙습니다.
    • 참고
      엄청난 강의량과 명쾌하고 손쉬운 설명 항상 감사하며 보고 있습니다.
      그런데 함수정의시 prototype 객체가 생성되고 생성자 함수와 상호링크하고,
      new 생성자로 개별객체 생성시 프로토타입 객체와 내재적 링크로 연결된다는 부분을 넣으면 좋을 것 같네요.
      new로 생성시 프로토타입 객체를 받는다는 설명은 구조상 혼동을 주고 잘못된 것 같습니다.
    • 공부합시다
      이게 옳은 생각 인가요 ?

      상속이란 단어와 복사라는 단어에 대해서 많이 생각해 봅니다.
      원본을 복사후에 복사본에 추가 후 사용.
      원본 수정 금지 !

      좋은 하루 되셔요
    • WayneKing
      자바처럼 상속을 지원을 못 해서 다른 방식으로 상속하는 건가요?
    • 자바에서 상속을 할려면 extends키워드가 필요한데
      자바스크립트에서는 안되니
      즉, function super() extends Ultra{
      }
      이렇게 안되니 자바스크립트에서는 일단 super()객체부터 일단 만들어 놓고
      super객체의 prototype변수에 상위 객체 포인터를 연결시키는것..
    • DoubleH
      클래스가 없어진 대신 클래스역할을 함수가 대신 수행하는 군요?!
    • document.write
      Ultra--->Function.prototype--->Object.prototype--->null
      Super--->Function.prototype--->Object.prototype--->null
      Sub--->Function.prototype--->Object.prototype--->null
      --------------------------------------------------------------------
      o--->Sub.prototype--->Super.prototype--->Ultra.prototype--->Object.prototype--->null
      ------------------------------------------------------------------------------------------------
      o.apply();
      o에 apply() 없음--> Sub.prototype에도 없음-->Super.prototype에도 없음-->Ultra.prototype에도 없음-->Object.prototype에도 없음-->null : o.apply is not a function 출력

      o.toString();
      o에 toString() 없음--> Sub.prototype에도 없음-->Super.prototype에도 없음-->Ultra.prototype에도 없음-->Object.prototype에 있음 [object Object] 출력

      o.ultraProp();
      o에 ultraProp() 없음--> Sub.prototype에도 없음-->Super.prototype에도 없음-->Ultra.prototype에 있음 true 출력
      ----------------------------------------------------------------------------------------------------------------------
      이게 맞나요?
    • 써머홀릭
      이해하기가 쉽지 않네요..
    • 쌩초보
      아...
      어렵네요...
    • 푸른하늘의 꿈
      예외적인 상황을 위해 prototype constructor 에 자신의 객체를 할당해 줘야 좀 더 정확합니다.
      http://stackoverflow.com......tor 위링크를 참조하세요..
    • framei
      감사합니다.
    • 조신부리
      감사합니다
    • WebCat
      prototype이라는 것은 그러면 따로 내장된 객체가 있는 것이 아니라 부모함수?에서 별도로 만든 객체를 참조해 쓰는 그런 개념적인 말이군요?
    • superjang
      new를 통해서 상속을 해야하는군요. 생각해보면 당연한 거긴하지만.. 참조를 생각못했네요ㅋ
    • 나무마루
      감사합니다.
    • 도로시
      이해한 줄 알고 넘어갔다가 뒤에서 막혀 다시 돌아와서 보니 이제서야 제대로 이해가 되네요!
      막혀 있는 길인 것만 같다가 이해하면서 뻥 뚫렸을 때의 희열이 느껴져 새삼, 그리고 누차 감사 드립니다 ^^
    • egoing
      정말 흥미진진한 내용들입니다! 기대하셔도 됩니다~
      대화보기
      • somdari
        좋은 강의 잘 보고 있습니다.. 감사^^; 과연 prototype 기반의 실 사용예는 어떠한 모습일지.. 자바스크립트에서의 객체지향 프로그래밍이 어떻게 쓰여지는지 앞으로의 강의가 기대되어집니다..
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기