[Js] prototype | 상속 | javascript 상속

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

 

---

이번 수업은 상속수업의 연장선상에 있다. 상속의 구체적인 수단인 prototype에 대해서 자세히 알아보자.

 

prototype은 자바스크립트의 객체지향을 지탱하고 있는 핵심적인 개념이며, 다른 일반적인 객체지향 언어와 구분하는 중요한 개념이라고 할 수 있다.

 

prototype

한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다.

함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다.

 

객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다.

prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 

 

아래 예시를 살펴보자.

<script>
    function Ultra(){}
    Ultra.prototype.ultraProp = true;

    function Super(){}
    Super.prototype = new Ultra();

    function Sub(){}
    Sub.prototype = new Super();

    var o = new Sub();
    console.log(o.ultraProp);
</script>

위의 결과는 true이다.

 

위 코드로 보자면 가장 큰 최상위 객체(물론 더 큰 개념이 존재함.) Ultra를 상속받는 Super를 상속받는 것이 바로 sub인 것이다.

 

sub에 정의되지 않은 ultraProp라는 값을 사용할 수 있는 것은 바로 "prototype" 덕분인 것이다.

 

sub라는 함수는 객체이고, 객체이기 때문에 프로퍼티(속성)를 가질 수 있다.

프로퍼티의 종류 중, prototype이라는 프로퍼티가 있는 것이고 당연히 객체인 sub는 이를 사용할 수 있는 것이다.

 

 

위 사진을 보자. 먼저 function func(){}로  func라는 객체를 만들어 주고 이를 보면 아무것도 들어간 값이 없다.

func의 속성인 prototype을 보면 func {} 라는 객체라 출력된다.

new  Object()라는 생성자 함수를 만들면 이 또한 객체로 정의 된다.

 

다시, func에 프로토타입에 속성으로 name을 주고, 이름을 'egoing'이라고 입력한다면 egoing 값이 저장된다.

 

var o 라는 변수를 만들고 new func() 즉, 생성자 함수로 func라는 객체를 만든 값을 o에 넣는다면

변수 o 안에는 name : egoing , 즉 원래 prototype이 가지고 있는 값이 리턴 되는 것이다.

 

객체가 프로토타입을 가르키고, 또 그것이 객체와 연결 -> 프로토 타입 ... 이렇게 위와같이 prototype이 체인을 이루는 형태를 "prototype chain"이라고 한다. 

 

생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.

 

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 Sub.prototype.ultraProp를 찾는다.
3. 없다면 Super.prototype.ultraProp를 찾는다.
4. 없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다.

 

 

 

※ 주의!!

Super.prototype = Ultra.prototype 으로하면 안된다.
이렇게하면 Super.prototype의 값을 변경하면 그것이 Ultra.prototype도 변경하기 때문이다. 
Super.prototype = new Ultra();는 Ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new Ultra()를 통해서 만들어진 객체에 변화가 생겨도 Ultra.prototype의 객체에는 영향을 주지 않는다.

 

 

내가 따로 이해한 것.

생성자 = 함수를 객체로 만들어 주는 것임. 즉 new Object라고 하면 Object {} 객체를 만들어 주는 것.

그렇다면 function Object(){} 와 같지 않을까?? 

-> x 

함수는 정의한다고 해서 객체로 바로 만들어 지는 것이 아님. 그래서 함수가 객체가 되었는지 출력해보면

defined 가 출력된다.

 

그래서 function Object(){} 을 해준뒤 Object.prototype을 해주면 new Object를 한 것과 유사한 효과가 나는데,

이렇게 코드를 짜게 되면 위와 같은 에러를 발생시킬 수 있는 것이다.

 

즉 원형을 변경하게 되면 실제 값이 변경되므로, 그 값을 똑같이 가지는 새로운 생성자를 만들어 주는 것이다.