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. 박병진
    넓게 바라보자. 복습완료. 나의 목표는 Javascript로 3d,AR 온라인 쇼핑몰 구현하고 고객들을 위해 서비스하기.
  3. 박병진
    오늘은 여기까지. 2020.10.29 내일 다시와서 복습
  4. CodingChan
    2020. 09. 06
  5. CODING
    완료
  6. 코딩중독
    아 이해가 너무 잘되네요^^ 감사합니다~~
  7. 한강
    좋은 아침입니다!^^
    200401
  8. nightow
    하단에서 선언하신
    function Person(){}

    var joon = new Person();
    Person.getType = function (){
    return "인간";
    };

    의 내용을 설명드리자면
    function function Person(){}과 var joon = new Person()은 다른 객체이기 때문입니다.
    joon이라는 객체를 선언시 new라는 명령어를 통해 기존의 Person()과 같은 기능을 하나 새로운 주소의 Person 함수를 생성하셨기에 그렇습니다.

    원하시는 console.log(joon.getType());를 실행했을 때 같은 행동을 하길 위하신다면
    var joon = Person()으로 선언하셔야 합니다.
    아니면
    var joon을 선언하시기 전에
    Person.getType = function (){
    return "인간";
    };
    선언을 하시면 동일한 행동이 됩니다.
    대화보기
    • 너굴맨
      저도 공부 중이지만 의견 남겨 봅니다.

      prototype라는 것은.. 한글로 번역했을 때, 원형이라는 뜻입니다.
      Person.prototype.getType = ~ 라는 건, Person이라는 원형에 getType라는 것을 넣을 거라는 뜻이 됩니다. 그러니까, Person 안에 getType라는 함수가 있는 거고, 이것을 joon이라는 변수에 담아 복제하여 사용한다고 했을 때, Person이라는 원형 객체 안에 getType라는 함수가 들어가 있으니, joon도 그대로 받게 돼요.

      prototype을 쓰지 않고 Person.getType을 쓴다는 건 그냥 메소드를 만들겠다는 것인데요, 이것은 원본에 넣겠다는 게 아니라, Person이라는 함수의 메소드로만 쓴다는 거예요. 복제할 때 getType을 넣어 주지 않는다는 거죠. Person.getType()를 입력하게 되면 "인간"이라는 콘솔 로그가 뜰 거예요. prototype을 사용하지 않고 원형 메서드를 추가하고 싶으시다면 ES6 공부를 해 보시는 것을 권유해 드립니다.
      대화보기
      • codingㅈㅁ
        궁금한 게 있는데요.
        function Person(){}

        var joon = new Person();
        Person.prototype.getType = function (){
        return "인간";
        };

        console.log(joon.getType());
        일때는 잘 되는데
        function Person(){}

        var joon = new Person();
        Person.getType = function (){
        return "인간";
        };

        console.log(joon.getType()); 은 왜 안되나요?
        초보라서 잘 모르겠네요...
      • 굼벵이
        완료
      • 홍주호
        20191102 완료
      • 박창신
        완료
      • 최경수
        개미는뚠뚠
      • 자스
        Super.prototype = new Ultra();
        여기에서 Super생성자가 Ultra 프로토타입을 가르키는건가요? 아니면
        Super 프로토타입이 Ultra 프로토타입을 가르키는건가요??
        대화보기
        • 호두
          고맙습니다
        • 호두
          저그는 모두 larva로 시작
        • choon
          감사합니다.
        • 미완성
          20190109
        • 스탐
          감사합니다.
        • 하하하하
          감사합니다
        • moon
          감사합니다.
        • amugae
          첫 설명에 확실히 오류가 보입니다.

          동영상 처음 시작할 때의 소스코드를 보면서 설명하시는 것을 보면

          sub->super->ultra 순으로 상속을 받고, ultra 안에 ultraprop라는 속성이 true 로 돼 있다고 말씀하셨는데 그게 아니라 ultra를 정의하면 ultra prototype이라는 객체가 생기고, 그 안에 ultraprop라는 속성이 있고, 그 값이 true인 것입니다.

          그리고 생성자를 상속받을 때, 상속은 그 생성자의 프로토타입을 참조하는 것이지, 그 생성자를 참조하는 것이 아닙니다.
          대화보기
          • 이해안갔는데 다음날 다시보니까 이해되네요 ㅎㅎ
          • 저격수
            댁이틀렸을거라는 생각은 안해보셨나요
            대화보기
            • 김진홍
              감사합니다!
            • 박인호
              12-19
              수강완료.
              실용적인 예제를 빨리 경험해 보고 싶네요.
            • 김진형
              마지막 주의사항에 대해서 테스트한 코드 입니다..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
            • GoldPenguin
              완료했습니다.
            • 신시내티
              객체함수 밖에서
              객체.prototype.method를 넣어주면, 추가로 method를 추가해줄수 있군요!

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

                항상 감사히 보고 있습니다.
              • 임지호
                자바스크립트는 prototype을 통해서 상속을 제공한다.
                객체의 변수, 함수에 대한 정보를 prototype이라는 속성에 저장하는데 그것은 객체 형태로 저장된다.
                상속에서 부모 객체의 복제본을 만들어 그것을 상속하고 그것을 통해서 자식 객체의 내용을 바꾸면 부모와 자식간 내용이 달라진다. 라고 생각하면 될 것 같다.
              • 폭스킴
                prototype chain 너와 나의 연결고리~
              • park
                자식함수.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 가 있더라도 저희같이 정말 필요로 하는 사람들이 더 많이 있고 감사함을 많이 느끼고 있다는걸 잊지 말아주세요...
                • 완료!
                  완료! 감사합니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기