JavaScript 객체지향 프로그래밍 상속

    2018-04-24 08:53:04 작성

    자바스크립트 상속

    자바스크립트에는 프로토타입 체인을 통해 상속이 이루어 집니다.

    • 프로토타입 체인

      프로토타입 체인
      버튼을 클릭하여 객체 연결관계를 살펴 보세요.
      1. SuperType 생성자함수를 정의하면 SuperType Prototype객체가 생성이 됩니다.
      2. SubType 생성자함수를 정의하면 SubType Prototype객체가 생성이 됩니다.
      3. 기존의 Prototype객체와 연결을 끊고 SuperType Prototype객체로 부터 객체를 생성하여 연결하여 상속 받습니다.
        새로 연결된 Prototype객에체 메서드를 정의 합니다.
      4. SuperType을 상속받은 SubType Prototype객체로 부터 객체 생성

      instancc의 [[prototype]] 이 SubType:Prototype으로 연결되고
      SubType:Prototype의 [[prototype]]이 SuperType:Prototype으로 연결됩니다.
      그리고 그림에는 없지만 모든 객체는 Object객체의 Prototype객체로 부터 상속을 받게 되므로
      SuperType:Prototype객체의 [[prototype]]은 Object객체의 Prototype을 가리키고 있게 됩니다.
      이러한 형태로 연결되는 구조를 프로토타입 체인이라고 합니다.

    • 프로토타입과 인스턴스의 관계

      다음의 두가지 방법으로 프로토타입과 인스턴스의 관계를 알 수 있습니다.

      instanceof 이 연산자를 사용하면 인스턴스의 생성자가 프로토타입 체인에 존재 할때 true를 반환
      isPrototypeOf() 이 메서드는 체인안에 존재하는 인스턴스에서 true를 반환합니다.
    • 프로토타입 상속의 문제

      프로토타입 패턴과 마찬가지로 프로토타입 내에 있는 프로퍼티는 공유됨을 잊지 마십시오.
      이 때문에 프로퍼티는 프로토타입에 생성하지 않고 생성자에서 정의합니다.
      프로토타입으로 상속을 구현하면 SuperType에서 정의한 프로퍼티가 SubType의 프로토타입에 소유됨을 볼수 있습니다.

      이렇게 instance1.color의 값이 변경되면 SubType에서 상속받은 모든 instance가 바뀌게 됩니다.
      그렇게 때문에 프로토타입 체인만 단독으로 사용하는 경우는 거의 없습니다.