• 티스토리 홈
  • 프로필사진
    alpha brain
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
alpha brain
  • 프로필사진
    alpha brain
    • 분류 전체보기 (93)
      • SOFTWARE DEVELOP (68)
        • REACT.JS (3)
        • WEBPACK (4)
        • HTML&CSS (2)
        • EXPRESS (0)
        • DATABASE (0)
        • NODE.JS (3)
        • JAVASCRIPT (24)
        • DOCKER (1)
        • Linux (3)
        • Git (6)
        • GRAPHQL (0)
        • Datastructure (7)
        • Development (6)
        • HTTP (1)
        • Programming Paradigm (1)
        • Algorithm log (5)
        • DEV log (1)
        • Project log (0)
        • I don't know yet (1)
      • 경제, 재무 (23)
      • 여행 (0)
      • 시사, 상식 (2)
  • 반응형
    250x250
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [Javascript] Pseudoclassical Subclass Instantiation
        2020년 02월 23일
        • alpha brain
        • 작성자
        • 2020.02.23.:25
        728x90
        반응형

        지금은 javascript가 많이 발전하여 oop를 구현하는것이 그리 어렵지 않지만 예전엔 구현이 좀 까다로웠다.

        이번 포스팅은 예전에는 어떤 방식으로 oop를 구현하는지 정리하는 포스팅이다.

        아래의 내용을 알아야 이번 포스팅을 이해할수가 있다.

        [programming paradigm] Object Oriented Programming
        OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m..
        artdev.tistory.com

        [Javascript] Object.create( ) 과 prototype chaining
        앞에서 prototype 과 __proto__ 를 알아보았다. 이번엔 특정 객체와 또 다른 특정 객체의 상속관계를 자바스크립트는 어떤식으로 만들어가는지 알아보자. [programming paradigm] Object Oriented Programming OOP..
        artdev.tistory.com

        [Jacascript] call, apply, bind and this
        이번 포스팅은 this의 4가지 바인딩 말미에서 언급한 강제로 this 바인딩을 변경하는것에 대한 포스팅이다. this가 가리키는것을 알아야 이번 포스팅을 이해할수 있으니 이 부분을 꼭 알고 와야 한다. [Javasvript..
        artdev.tistory.com

        대표적인 방식인 Pseudoclassical pattern 을 보면,

        function SuperClass(arg1,arg2){
          this.arg1 = arg1;
          this.arg2 = arg2;
        }
        
        SuperClass.prototype.foo(){
          console.log(this.arg1);
          console.log(this.arg2);
        }
        
        function Subclass(argA,argB){
          SuperClass.call(this,argA,argB);
        }
        // SubClass의 constructor와 prototype부분을 이런식으로 변경해주여 구현한다.
        SubClass.prototype = Obeject.create(SuperClass.prototype);
        SubClass.prototype.constructor = Subclass;
        

        메서드의 오버라이딩 부분은 SuperClass의 foo에 this(SubClass)를 넘겨주어 강제로
        SuperClass의 foo를 실행시킨다.

        SubClass.prototype.foo = function(){  
          SuperClass.prototype.foo.call(this);  
         // do somethig....  
        }
        

        오래전에 쓰여진 라이브러리는 상속을 이런식으로 구현한것을 볼수가 있는데,
        mongoose 패키지의 일부에서도 이런 상속패턴이 쓰이고있다.

        이 방식으로 코드를 짤것인지는 잘 모르겠지만 다른사람의 코드를 볼때 알아두면 좋을것 같다.

        728x90
        반응형

        'SOFTWARE DEVELOP > JAVASCRIPT' 카테고리의 다른 글

        [Javascript] 비동기함수(2) - CallBack  (0) 2020.05.25
        [Javascript] 비동기함수(1) - Event Loop  (0) 2020.03.29
        [Jacascript] call, apply, bind and this  (0) 2020.02.21
        [Javascript] class inheritance in ES6  (0) 2020.02.14
        [Javascript] Object.create( ) 과 prototype chaining  (0) 2020.02.14
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바