[Javascript] prototype, class

개요

• 프로토타입
• 클래스

---

언제 사용하는가?

문득 인벤이나 오피지지 같은 사이트를 만들고 싶다는 생각을 했을 때 게임 캐릭터에 대한 정보를 자료형으로 정리를 해야한다 그 때 자바스크립트 오브젝트 형식으로 정리를 하려고 할 때 하나하나 만드는 하드 코딩은 너무 비효율적이다. 그렇기에 비슷한 형식의 객체를 많이 많들어야 할 때 사용할 수있는 문법이 클래스이고 자바스크립트가 클래스 문법이 없었을 때는 어떻게 만들 수 있었는지 또한 프로토타입은 어떠한 영향을 끼치는지에 대해서 알아보자

 

프로토 타입 (Prototype)

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 이때 프로토 타입은 객체를 생성하기 위한 방법으로 객체를 생성하기 전 클래스를 정의해서 이를 통해서 인스턴스(객체)를 생성하는 방식과 다르게 클래스 없이도 객체를 생성할 수 있다.

 

부모 자식 관계 파악

모든 클래스는 부모, 자식 관계를 이루고 있다는 것을 알아야 한다.

// 옛날엔 이렇게 했다
function 기계 (q, w) {
	this.q = q;
	this.w = w;
}
// 기계로부터 생성되는 오브젝트가 this이고 이것이 인스턴스이다
// {q: 'consume' ...} 이런식의 오브젝트가 나온다

const nunu = new 기계('스노우볼', '달리기')
const garen = new 기계('때리기', '빨리 달리기')

위 코드는 자바스크립트에서 가장 기본적으로 객체를 생성하는 방법으로 클래스 없이(ES6에서 class가 추가 됨) 인스턴스를 생성하는 기본적인 방법이다.

 

이때 기계()를 부모, new 기계(...)를 자식 이라고 칭하며 부모의 값을 자식이 상속받는다는 개념으로 받아들이면 된다.

 

이렇게 객체를 생성할 수 있는데 prototype은 무엇일까?

프로토 타입은 유전자이다. 부모 자식 관계에서 실질적으로 눈에 보이지는 않지만 부모가 자식에게 전달한 무언가 그것이 프로토 타입이다.

 

아래 코드를 보자

// const array1 = new Array(1, 2, 3) 아래와 동일한 것임
const array1 = [1, 2, 3]
array.sort()
array.length

// 선언해주지도 않은 메서드나 데이터를 가져다 쓸 수 있는 이유는 무엇일까?
// 기본 함수들이 부모 유전자에 기록되어 있으니 사용할 수 있는 것임

우리는 array1이라는 배열을 만들고 값을 할당해서 넣었지만 sort와 length에 대한 정의도 아무것도 하지 않았는데 사용할 수 있다. 이것은 Array라는 부모에게서 상속받은 사항이기 때문이다.

array1.prototype.name = 'kang'

array1.name // 'kang'

이렇듯 쉽게 할당을 하여 출력을 할 수도 있다. 이러한 프로토타입은 자식이 가졌는지를 먼저 확인 후 없을 시 부모를 따라 조부모까지 쭉쭉 찾아서 올라가서 찾기에 부모 자식 관계를 아는 것이 중요하다.

---

클래스 (class)

class Hero {
	constructor(q, w) {
    	this.q = q;
        this.w = w
    }
}

이전에 함수를 사용해서 만들었듯이 클래스를 사용해서 객체(인스턴스)를 생성하는 방법이 있다 이러한 방법은 ES6에서 도입되었으며 클래스를 통해서 만든 인스턴스는 클래스에서 정의한 것을 상속하는 관계가 된다. 

 

어떠한 속성을 물려받아 사용하고 싶을 때 class를 이용하든 prototype을 이용하든 정하면 된다.