Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

체대출신 코더의 개발자 성장기

우리모두는 누군가의 유전자를 물려받았다.. - __proto__ 본문

카테고리 없음

우리모두는 누군가의 유전자를 물려받았다.. - __proto__

미토콘크리트 2019. 6. 3. 15:57

자바스크립트라는 언어는 본디 '프로토타입'기반의 언어이다.

상위 클래스의 물건들을 상속받아 자신의 것 처럼 쓸 수 있었던 '클래스'기반의 언어와는 다르게

자바스크립트는 태생부터 '상속'이라고 명시된 기능은 존재하지 않는다.

하지만, __proto__를 이용한다면 상속의 기능을 구현 할 수가 있다. 

 

1. 어떻게 상속이 가능해지는데?

상속을 학습하기 전에 앞서, 상속은 기본적으로 아무것도없이 이뤄 질 수 없기 때문에 

무언가를 상속 할 수 있는 기본적인 틀을 생성해줘야한다.

자바스크립트에서 누군가를 생성하는 것이 "constructure(생성자)"의 획득을 통해 가능해지는데, 

이는 new키워드를 통해 만들어진 모든 것에 주어진다.

var changeStr = new String();
var changeObj = new Object();
var changeArr = new Array();
var changeNum = new Number();

"생성자"의 자격은 함수에만 주어질 수 있으며, 모든 함수에는 기본적으로 __proto__(prototype 객체) 가 존재한다

__proto__ 존재

 

2. 기능을 물려줘보자! 

모든 함수에는 __proto__가 존재한다고 했다.

이 공통으로 존재하는 요소를 이용해 다음세대에게 기능을 물려줄 수 있다.

물려주기위한 기능의 작성은 [기능을 물려줄 함수].prototype.[물려줄 기능] 의 형식으로 작성해주면된다.

 1)기능을 물려줄 부모함수를 작성한다. 

var Grandpa = function() {} //new Function()

 2) 물려줄 기능들을 작성한다. 

Grandpa.prototype.대머리 = "이마넓음"
Grandpa.prototype.호빗 = "키 최대 170cm"

 3) 기능을 물려받을 자식함수들을 new 키워드를 이용해 만들어준다.

var Father = new Grandpa()

 4) 자식함수내부에는 아무것도 없지만, 물려받은 기능들을 사용할수 있다.

__proto__ 상속

이와 같은 기능이 가능하게 된것은 자식들이 부모의 __proto__ 속성을 그대로 지니고 있기 때문이다.

Father안의 내용을 보았을 때, Grandpa의 속성을 모두 지니고있음.

3. 그럼 자식들은 무조건 부모의 것을 지니고 가나요..?

결론만 말하자면 아니다!

지니고는 있지만,  부모에게서 물려받은 것들을 계속지니고 갈 수도있고, 변경도 할 수 있다. 

또 자식함수 또한 함수이기 때문에 당연히 __proto__를 가지고 있다.

그렇기 때문에 이 자식들도 또 다른 자식들에게 자신의 기능을 물려줄 수 있다!

하지만 부모는 아래의 사진에서 보이는 것 처럼 뭔가를 생성하고, 기능을 상속할 수 있는 기능은 없기 때문에

new 키워드를 이용해 생성이 불가하다.

Grandpa로 부터 전달받은 인자를 변경사항없이 그대로 전달받았기 때문에, 뭔가를 상속시킬 수 없다.

하지만 그럼에도 불구하고 무엇인가를 전달하고 싶다면 어떻게 해야할까?

Father자신이 가지는 constructure이 존재하지 않음

아래와 같이 Object.create를 사용하면 된다.

var me = Object.create(Father)
var sister = Object.create(Father);

Object.create를 이용한 상속

하지만 이 상속또한 Father에서 물려받은것이 아니라, 결국은 Grandpa에게서 물려받은것이다.

이처럼 부모는 자식에게 그 자식은 자기의 자식들에게 계속 자신의 것들을 전달해 줄 수 있다.

무엇으로?? __proto__ 객체를 통해서 말이다!!

하지만 반대로 생각해본다면 부모는 자식의 것들을 쓸 수 없다!!

me.호빗탈출 = "호빗탈출 키 180cm!"
Father.호빗탈출 ===>?

부모는 자식의 것을 쓸수는 없다!

 

위의 과정을 자바스크립트에서는 prototype chain을 이용한 상속이라고 말한다! 

프로토타입 설명

 

 

 

   

Comments