[TIL] Prototype Chain

자바 스크립트는 prototype 기반 언어라는 말이 있다고 한다.

오늘은 prototype이 뭔지 공부해보고 정리하는 시간을 가지려 한다.

 

그 동안 자바 스크립트에는 class의 개념이 없어 객체의 생성이나 상속을 프로토타입이란 메커니즘을 이용해 구현했다.

하지만 class의 개념이 생겨났고 현재는 잘 안쓰려고 하는 추세라고 한다.

이 프로토 타입을 설명하기 위해서 가장 유용한게 분류법이라 생각한다. 우리가 객체를 만들면 가장 상위에 Object라는 객체를 상속 받는데 이처럼 인간이라 하면 동물이라는 가장 상위 객체가 존재하고 동물에서 부터 각 분류법에 따라 속성들을 분류하여 최종적으로 인간이라는 객체가 완성되듯이 prototype을 이용해 속성을 상속하여 분류하는 것이라 이해했다.

 

1. __proto__

프로토 타입이란 객체와 객체를 연결하고 한쪽 방향으로 상속을 받는 형태로 만드는 것을 뜻한다.

이렇게 객체와 객체를 연결하여 멤버 함수나 변수를 공유하여 상속과 비슷한 효과를 얻을 수 있다.

let a = {
	state : 1
}

let b = {}

위와 같이 객체 a와 객체 b가 있는 경우 객체 b가 객체 a를 상속 받는 형태 즉 사용할 수 있도록 하는 방법은 

b.__proto__ = a;

b.state // 1

위와 같이 __proto__를 이용하면 된다.

프로토타입의 상속 구조는 부모 객체가 변경될 경우 즉 수정과 변형이 이뤄질 경우 자식 객체에도 영향을 주며 이는 자바스크립트 상속만의 특징이라 할 수 있다. (일반적인 클래스개념에서는 허용되지 않는듯 하다)

 

2. constructor

모든 생성자 함수는 constructor 라는 속성을 지닌 객체를 프로토타입 객체로 가지고 있는데 여기서 constructor는 원본 생성자 함수 자신을 가리키고 있다.

b.constructor // ƒ Object() { [native code] }

위와같이 constructor를 사용하여 호출하면 생성자 함수를 반환한다.

즉 constructor를 이용하여 새로운 객체를 생성할 수도 있다.

 

3. prototype

객체가 상속받는 속성들의 집합(?) 또는 객체가 가진 속성의 집합이라고 볼 수 있다.

let human = function(){}

human이라는 객체를 생성하여 prototype을 확인해보면 위와 같이 human이라는 객체가 가진 속성들이 나온다.

자 이제 human을 상속하여 yykim이라는 새로운 객체를 만들어 보자

human.prototype.eat = "eat something"
let yykim = new human()
console.log(yykim)

위와 같이 human을 상속한 객체가 생성 되었다.

 

4. es6에서의 class 사용법

다행히 es6에서 class가 추가되어 구질구질한 prototype을 안써도 객체 지향 프로그래밍을 할 수 있다.

class [이름] {
	constructor([매개변수]) {
    this.[변수명] = [원하는 값]
    }
}

// 클래스를 상속 받으면서 새로운 클래스를 생성
class [이름] extends [상속받을 class 이름] {
	constructor([매개변수]) {
    super([부모에개 전달하는 전달인자])
    this.[변수명] = [원하는 값]
    }
}

위와 같이 사용 가능하다.

constructor에는 class에서 받을 수 있는 매개 변수들을 입력받을 수 있다.

constructor에서 사용할 변수는 this.[변수명]을 통해 사용 가능하다.

기존에 선언된 클래스를 상속하여 클래스를 선언하면 super라는 키워드를 사용할 수 있는데. 이는 부모 class의 생성자 함수를 호출하여 값을 넘겨주는데 사용한다. 전달된 값들은 부모 클래스에 전달인자로 확인되어 상속 시 전달된 값에 따라 상속된다.

 

예전에 리엑트를 사용하면서 class는 정말 많이 사용했는데 사용하는 방법만 알았지 구조가 어떻게 되는지모르고 쓰는 경우가 다반사였는데 오늘 공부를 하면서 조금 알게 된 것 같다.

아직 공부가 모자란거 같아서 반복하면서 개념을 머리에 넣어야 될 것 같다.