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. 코딩박
    2023.11.16. JavaScript 입문 수업 - 객체지향 - prototype 파트 수강했습니다.
  2. DreamBoy
    2023.10.15. JavaScript 입문 수업 - 객체지향 - prototype 파트 수강했습니다.
  3. 늦은개발자
    23.07.26 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다.
  4. 진진리
    22.05.12
  5. ansang
    function Person(name){
    this.name = name;
    }
    Person.prototype.name=null;
    Person.prototype.introduce = function(){
    return 'My name is '+this.name;
    }
    var p1 = new Person('egoing');
    document.write(p1.introduce()+"<br />");

    위 예제에서 Person.prototype.name=null; 이부분은 왜 써주는건가요? 초기화 하는건가요?
  6. sdfddf
    https://realmojo.tistory.com/337
    자바스크립트 성능최적화
  7. 낀찐
    2022. 02. 05 완료
  8. pmxsg
    2021.12.17 수강
  9. 드림보이
    2021.12.10. prototype 파트 수강완료
  10. GelandeWagen
    ok
  11. Grit
    감사합니다.
  12. seaWater
    2021. 9. 28. 완료
  13. choi
    완료
  14. labis98
    20210822 good!!!
  15. 낭만고양이
    수강완료 어느덧 마지막을 향해 가네요
  16. Amousk
    좋은강의 감사합니다.
  17. gf0308
    감사합니다 이고잉님 :)
  18. cosgenio
    다른 언어 하다가 왔는데, 설명이 좀 부족해 보이네요
    기술적인 설명 없이 "연결" 이라고 하면 이게 has-A 인지 is-A인지, 또 "내부적으로 일어나는 일"이 실제 prototype가 소스 코드 상에서 구현된 방식인지, javascript 가 지원하는 polymorphism의 구동 원리인지 이해가 잘 안가네요
  19. 객체의 prototype은 다른 객체로부터 메소드나 프로퍼티를 상속(복제)받아오는 개념
  20. 강승
    감사합니다.
  21. 박병진
    넓게 바라보자. 복습완료. 나의 목표는 Javascript로 3d,AR 온라인 쇼핑몰 구현하고 고객들을 위해 서비스하기.
  22. 박병진
    오늘은 여기까지. 2020.10.29 내일 다시와서 복습
  23. CodingChan
    2020. 09. 06
  24. CODING
    완료
  25. 코딩중독
    아 이해가 너무 잘되네요^^ 감사합니다~~
  26. 한강
    좋은 아침입니다!^^
    200401
  27. 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 공부를 해 보시는 것을 권유해 드립니다.
      대화보기
      • 굼벵이
        완료
      • 홍주호
        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
              완료했습니다.
            • 이승우
              완료
            • 이승우
              2017/08/08 01/02 완료
            • Yeji Kim
              프로토타입..뭐더라...
              라고 생각했었는데 이제 확실히 머리에 들어왔습니다.
              좋은강의 감사합니다
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기