JavaScript, Prototype 상속과 .__proto__

개발을 하면 기존 기능을 확장해야하는 경우가 생깁니다.

 

기존 객체와 유사하지만 다른 기능을 추가한 또 다른 객체를 만들어 사용하는 경우

 

우리는 prototype 상속을 사용할 수 있습니다.

 

(개발자는 게을러야하기 때문에)

1.  [[Prototype]] 상속이란

자바 스크립트의 모든 객체는 명세서에 기재된

[[Prototype]]이라는 숨김 프로퍼티를 가지고 있습니다.

이 프로퍼티는 값을 가질 수 있습니다.

1-(1)

그림과 같이 animal, rabbit 두 객체가 있다고 할 때

rabbit의 숨김 프로퍼티인 [[Prototype]]은 animal을 참조한다고 해봅시다.

 

1-(2)

그림과 같이 rabbit 객체는 jump()라는 메소드와 age 라는 프로퍼티를 가지고 있고

animal 객체는 walk()라는 메소드를 가진 객체라 해봅시다.

 

이 때 만약 사용자가 rabit.walk() 접근을 한다면 어떻게 될까요?

 

자바스크립트 엔진은 rabbit 객체 안에 walk() 라는 메소드가 있는지 확인할 것입니다.

 

우리는 rabbit 객체 안에 walk()라는 메소드가 없기 때문에

자바스크립트 엔진은 rabbit의 프로토타입을 확인하고

animal에 walk()메소드가 있음을 확인하고 호출 및 실행 시킵니다.

 

이처럼 객체 안에 프로퍼티 혹은 메소드를 호출했을 경우에 해당 객체가 아닌 [[Prototype]] 숨김 프로퍼티에 객체를 참조하여 상속 받는 것을 prototype 상속이라고 합니다.

 

2. __proto__ , [[Prototype]] 의 getter, setter

자 여태 그림을 통해 살펴보았지만 이번에는 코드로 한 번 살펴봅시다.

"use strict";

let animal = {
    walk() {
        console.log("I'm 걷고 있어요");
    }
}

let rabbit = {
    age : 2,
    jump() {
        console.log("깡총");
    }
}

rabbit.__proto__ = animal; // 프로토타입 상속 객체 대상 설정
rabbit.jump();
rabbit.walk(); // animal의 메소드 참조

실행결과도 한 번 바로 봅시다 

1-(3)

상속이 잘 되어서 walk() 메소드가 호출된 것을 확인할 수 있습니다.

 

이 처럼  [[Prototype]]의 getter, setter인 __proto__를 사용할 수 있습니다. (하지만 이건 구시대 방법이라 잘 사용 안합니다)

target.__proto__ = ObjectYouWant

다음과 같은 형태로 프로토 타입을 Set 할 수 있습니다.

프로토타입 값은 두 가지로 (1) 다른 객체 (2) null 값만 가능합니다.

 

결론

1. 모든 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 가지고 있다.

2. 객체에 있는 메소드와 프로퍼티를 호출할 때 해당 호출하는 메소드 혹 프로퍼티가 없을 경우 프로토타입 객체를 확인한다.

3. 프로토타입 프로퍼티는 직접 변경할 수 없기 때문에 getter, setter인 .__proto__ 를 통해 값을 get, set한다. (__proto__는 옛날 방법이다)

 

다음 시간에는 prototype을 변경하는 현대적인 방법과 헷갈릴 수 있는 prototype에서의 this를 정리하겠습니다.

프로토타입 상속