• 티스토리 홈
  • 프로필사진
    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] Object.create( ) 과 prototype chaining
        2020년 02월 14일
        • alpha brain
        • 작성자
        • 2020.02.14.:26
        728x90
        반응형

        앞에서 prototype 과 __proto__ 를 알아보았다.

        이번엔 특정 객체와 또 다른 특정 객체의 상속관계를 자바스크립트는 어떤식으로 만들어가는지 알아보자.

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

        cf. o.o.p 에 대해 어느정도 이해가 있어야 코드를 이해할수 있을것 같다.

        var Person = function() {
          this.canTalk = true;
        };
        
        Person.prototype.greet = function() {
          if (this.canTalk) {
            console.log('Hi, I am ' + this.name);
          }
        };
        var Employee = function(name, title) {
          //Person.call(this);
          this.name = name;
          this.title = title;
        };
        
        

        person 과 employee 객체에서 상속을 사용하려면,

        Employee.prototype = Object.create(Person.prototype);

        mdn에서  Object.create( ) 의 역할은  지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만든다. 라고 되어있으므로,

        Employee 에 prototype 프로퍼티가 Person.prototype 객체를(새로 만들어진) 가리키게 된다.

        그림으로 보자.

         이런식으로 된다. 하지만 constructor 까지 person으로 가져오기때문에 이부분은 다시 Employee로 바꾸어 주어야 한다.

        Employee.prototype.constructor = Employee;

        기본적인 자바스크립트에서 상속은 이런식으로 하게 되고 부모 객체의 프러퍼티를 사용하려면 call,appy 메서드를 사용해서 강제로 바인딩해주어 사용해야 한다.

        var Employee = function(name, title) {
          Person.call(this);
          this.name = name;
          this.title = title;
        };
        
        

        2번째 줄처럼 call을 사용해서 person 의 프로퍼티를 사용한다.

        728x90
        반응형

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

        [Jacascript] call, apply, bind and this  (0) 2020.02.21
        [Javascript] class inheritance in ES6  (0) 2020.02.14
        [Javascript] prototype, __proto__, constructor  (0) 2020.02.14
        [Javascript] callBack은 call me back  (0) 2020.01.26
        [Javasvript] this는 가리킬뿐, this의 4가지 바인딩  (0) 2020.01.26
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바