Tech/Javascript

[Javascript] 객체 상속 (object-inheritance), __proto__

lonnie(동현) 2021. 1. 3. 22:49

 

1. 일반적인 객체 지향 프로그래밍의 상속 

 객체 지향 프로그래밍은 크게 두 가지 요소로 나누어져 있다. 첫번째는 class, 두 번째는 그 class를 통해 만들어진 object가 있다. 객체 지향 언어에서의 상속은 sub class가 super class의 자식이 되고, 그 sub class를 통해서 객체를 생성한다. 따라서 이 객체가 어떤 기능을 하는지는 class단에서 결정되기 때문에 다른 객체의 상속을 받는 것은 불가능하다.

상속 받고 객체를 생성하는 과정


2. 자바스크립트에서의 객체 상속 __proto__

 자바스크립트에서는 객체가 직접 다른 객체로부터 상속을 받을 수 있다. 따라서 sub object(기능을 추가하고 싶은 객체)가 super object로부터 직접 기능을 상속받을 수 있다.  다른 객체로부터 상속을 받고 싶을 때는 link만 바꿔주면 되는데, 이를 prototype link라고 부른다. 그리고 이 prototype link가 가리키고 있는 객체를 prototype object라고 부른다.

 superObj , subObj라는 두 개의 객체를 만들었다.

객체 두개 생성

 이제 superObj라는 객체로부터 subobj에 상속을 받기 위해서 사용하는 것은 '__proto__'인데, 다음과 같이 사용되는데, subObj 객체에 prototype link를 걸어준 것이고 따라서 superObj는 prototype object가 되는 것이다.

superObj 객체로 부터 상속 받는 subObj

 아래와 같이 실행을 시켜보자. 첫 번째는 subObj 객체가 갖고 있는 subVal을 출력하는 것, 두 번째는 subObj 객체가 상속받아 사용할 수 있는 sueprVal을 출력하는 것이다.

실제로 상속 받은 것을 출력할 수 있는지 확인

 결과는 아래와 같이, 정상적으로 상속받아서 출력하는 것을 볼 수 있다. 

위의 코드의 출력 값

 그렇다면, 상속을 받는 객체가 부모 객체의 값을 수정할 수 있을까?

subObj(자식 객체)가 부모 객체의 값을 바꾸는 것을 시도, 출력한 코드

 '결과는 수정할 수 없다'이다. 그 객체를 바꾸는 것이지 그 객체의 proto를 바꾸는 것은 아니다.

728x90
반응형

'Tech > Javascript' 카테고리의 다른 글

[Javascript ] DOM  (0) 2021.01.18
[Javascript] 객체 상속 (object-inheritance), Object.create()  (0) 2021.01.03
[Javascript] super  (0) 2021.01.03
[Javascript] 상속(Inheritance)  (0) 2021.01.02
[Javascript] class 에서 메소드 구현하기  (0) 2021.01.02