[javascript] 10-18 자바스크립트 스터디 - 상속

2021-10-18

10-18 [객체지향-상속]

apply와 this

  • apply는 ECMA script 표준 메소드, 첫번째 인자로 함수호출 컨텍스트를 대입하게 되면 func가 실행될 때의 this 값이 첫번째 인자로 컨텍스트가 실행이 됨
  • 자바스크립트에선 함수 또한 객체와 동등한 상태고 apply에 따라서 종속관계가 달라진다.
  • 함수가 누구의 소속이냐에 따라 this는 그 소속을 가르친다

상속이란?

  • 오리지널 객체를 상속받아 기존 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해주는 개념
  • 생성자 (객체)에 약속되어있는 prototype이라는 객체의 프로퍼티와 메소드 등을 정의할 수 있다

개념

  • 동일한 기능을 받는 상속은 의미가 없다
  • 객체의 프로퍼티와 메소드를 생성자의 prototype에 할당시키면 된다.

😎 new 생성자를 하게되면 어떤 객체가 생성하게 됨.

객체를 생성하면 자바스크립트는 prototype이라는 property를 그 객체가 가지고 있는지 확인(?) 한 후 생성자 함수 안에 들어있는 객체(프로퍼티 & 메소드 덩어리들)와 똑같은 객체를 만들어서 생성자의 결과로 return해준다

어떻게 사용하는가?

  • 원본은 그대로, 한번 수정하면 한꺼번에 수정이 됨
  • 원본을 상속받은 채로 다시 prototype 객체의 메소드, 프로퍼티 별개로 추가/수정할 수 있다.
  • 상속받고자 할 때는 new 생성자클래스를 해서 복제를 해야함.

      function Ultra(){}
      Ultra.prototype.ultraProp = true;
        
      function Super(){}
      Super.prototype = new Ultra();
        
      function Sub(){}
      Sub.prototype = new Super(); // good
      Sub.prototype = Super.prototype // bad: 자식에게 일어난 일이 부모에게도 똑같이 일어날 수 있음
    

prototype이란?

  • 생성자는 기본으로 함수입니다. new를 붙혀줌으로서 생성자 함수가 작동이 되면서 객체를 리턴한다.
  • 객체 리터럴을 통해서 객체를 만들어도 되지만, 우리가 어떤 객체를 획득했을 때 그 객체가 원래 가지고있어야하는 메소드, 프로퍼티값도 우리에게 함께 주어지길 바랄 때… 즉 이 객체의 원형을 가지고 싶을 때, 어딘가에 저장이 되어있다. 즉 이 때 prototype이라는 프로퍼티의 역할이 중요하다.

    생성할 때 prototype의 프로퍼티 및 메소드에 저장되어있는 애들이 객체로 리턴된다

    서로가 서로 연결되는 프로토타입 : prototype chain