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. 김진형
    마지막 주의사항에 대해서 테스트한 코드 입니다..C#만 배웠던 저에게는 javascript 는 신세계!!
    Super.prototype = Ultra.prototype 와 Super.prototype = new Ultra();의 차이점이 헤깔릴때 도움되셨음 좋겠습니다!!
    // Super의 생성자 사용
    function Parent(){}
    function Child(){}
    Child.prototype = new Parent();

    var p = new Parent();
    var c = new Child();
    Child.prototype.isStudent = true;

    console.log(p.isStudent); // undefined
    console.log(c.isStudent); // true

    // Super의 프로토 타입 할당?
    function Parent(){}
    function Child(){}
    Child.prototype = Parent.prototype;

    var p = new Parent();
    var c = new Child();
    Child.prototype.isStudent = true;

    console.log(p.isStudent); // true
    console.log(c.isStudent); // true
  2. GoldPenguin
    완료했습니다.
  3. 신시내티
    객체함수 밖에서
    객체.prototype.method를 넣어주면, 추가로 method를 추가해줄수 있군요!

    객체함수 안에서 생성된 method는 상속,
    객체함수 밖에서 추가된 method는 공유인가요?
  4. 이승우
    완료
  5. 이승우
    2017/08/08 01/02 완료
  6. Yeji Kim
    프로토타입..뭐더라...
    라고 생각했었는데 이제 확실히 머리에 들어왔습니다.
    좋은강의 감사합니다
  7. Seo Yun Seok Tudoistube
    1년동안 궁금했던 사실을 이 강의에서 깨달았습니다.
    만약, 부모객체의 prototype 을 받게 되면, 자식객체의 속성에 일어나는 변화가 Prototype Chain 으로 인해
    바로 부모에게 영향을 주게 되어 옳바른 작동을 하지 않아서 부모객체를 생성해서 상속받아야 하는군요.
    감사합니다^_____^!!!
  8. crable
    감사합니다.
  9. 최규선
    감사합니다.
  10. 김돌돌
    잘봣습니ㄷ.
  11. 전성욱
    제이쿼리 플러그인같은걸 어떻게 만드는지 대충 이해가 가네요 정말 감사드립니다
  12. 김소희
    잘봤습니다 감사합니다!!
    대화보기
    • 신입1
      감사합니다.
    • 문바이
      Call by Reference / Call by Value에 대한 이해가 있고,
      해당 방식이 [메모리]에 어떻게 적재되는지 상상하시면
      좀더 이해가 빠를 수 있을것 같습니다.

      항상 감사히 보고 있습니다.
    • 임지호
      자바스크립트는 prototype을 통해서 상속을 제공한다.
      객체의 변수, 함수에 대한 정보를 prototype이라는 속성에 저장하는데 그것은 객체 형태로 저장된다.
      상속에서 부모 객체의 복제본을 만들어 그것을 상속하고 그것을 통해서 자식 객체의 내용을 바꾸면 부모와 자식간 내용이 달라진다. 라고 생각하면 될 것 같다.
    • 폭스킴
      prototype chain 너와 나의 연결고리~
    • 자식함수.prototype = new 부모함수(); 이렇게 하면

      자식함수가
      부모함수.prototype.프로퍼티1
      부모함수.prototype.프로퍼티2
      부모함수.prototype.프로퍼티3.... 이런식으로 만들어진 모든 프로퍼티들을 가져다가 쓸 수 있겠네요.
    • 왈라비
      저도 prototype이랑 상속개념에와서 new의 역활이 헷갈리기 시작했는데 joker님 댓글통해서 다시 생각해보니
      이게 new의 이해부터 정확하게 다시해야 모든 상황에 일관된 개념이 잡히더라구요.

      new 를 이해할때,

      변수방or객체 = new 함수명();
      좌항안에 우항 함수의 코드값을 복사해온다, 로 이해하면 모든 상황에서 일관되게 이해할수있어요.

      var o = new 함수명();
      함수a.prototype = new 함수b();

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

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

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

          좋은 하루 되셔요
        • WayneKing
          자바처럼 상속을 지원을 못 해서 다른 방식으로 상속하는 건가요?
        • James
          자바에서 상속을 할려면 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
          정말 흥미진진한 내용들입니다! 기대하셔도 됩니다~
          대화보기
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기