javascript에서 Class 사용하기 - 1

소개

javascript는 ES6에서부터 Class 지원을 시작했습니다. 단 javascript의 class는 다른 객체지향 언어에서 사용되는 Class 문법과는 다르게 사용됩니다. javascript에는 Class라는 개념이 없기 때문에 javascript는 prototype을 이용해 상속을 구현합니다. 

prototype

javascript의 Class를 이해하기 위해서는 prototype에 대한 이해가 선행되어야 하기 때문에 prototype에 대해서 알아보도록 합시다. 자바스크립트는 원시 값(primitive, 또는 원시 자료형)을 제외하고는 모두 객체입니다. 

Object와 Function은 function(즉, 생성자)입니다. object는 객체를 의미합니다.

function Card() { }  // 함수
var useCard = new Card();  // 객체 생성

코드를 설명해 보자면 Card 함수를 생성한 후에 useCard 변수에 Card를 할당하여 useCard라는 객체를 생성했습니다. 이때 Card 함수를 생성자라고 하고 생성자는 새로 생성된 객체를 초기화하는 역할을 합니다.

var useCard = {}  // 생성자 없이 객체 생성

이번에는 리터럴 방식으로 객체를 생성하였습니다. 생성자를 선언하여 객체를 만드는 방법과 달라보이지만 결과적으로 자바스크립트 엔진은 이를 아래와 같이 해석합니다.

var useCard = new Object(); // 객체 생성

따라서 결과적으로는 리터럴 방식으로 객체를 생성할때도 Object라는 함수(생성자)를 통해서 객체를 생성하게 되고 언뜻 보기에는 배열처럼 보이는 array의 경우에도 결국에는 자바스크립트 엔진은 아래와 같이 해석합니다.

var card = ['normal', 'normal', 'epic']  // 객체 생성
위 코드를 자바스크립트 엔진은 아래와 같이 해석합니다.
var card = new Array('normal', 'normal', 'epic')  // 객체 생성
>> typeof(Array);
>> "functuon"  // Array도 결국은 함수(생성자)

여기서 이해해야할 중요 포인트는 객체는 함수로부터 시작된다 입니다.

 

함수의 생성과정

객체는 함수로부터 시작되기 때문에 사용자가 객체를 생성하기 위해 먼저 함수를 정의하게 됩니다. 이때 발생하는 일에 대해 알아보겠습니다. 여기서는 2가지를 기억해야 합니다.

1.함수를 정의하면 함수가 생성되며 Prototype object가 같이 생성 됩니다. 생성된 Prototype object는 함수의 prototype 속성을 통해 접근할 수 있습니다. (Prototype object같은 경우 함수 생성시에만 됩니다. 일반 객체 생성시에는 생성되지 않습니다.)

 

2.함수의 생성과 함께 생성된 Prototype object는 constructor와 __proto__를 갖고 있습니다. (cover property를 추가한것 처럼 사용자 임의로 추가 가능합니다.) constructor는 생성된 함수를 가리키며(여기서는 function Card을 가리킵니다.) **_proto_**는 Prototype Link로서 객체가 생성될 때 사용된 생성자(함수)의 Prototype object를 가리킵니다. 

>> function Card() {};
<< undefined
>> Card.prototype.hidden = 'good';
<< 'good'
>> console.dir(Card.prototype)
<< Object // 함수와 함께 생성된 Object
    constructor: ƒ Card()
    hidden: 'good'
    __proto__: Object

객채의 생성과정

>> function Card() {};
<< undefined
>> Card.prototype.hidden = 'good';
<< 'good'
>> var useCard = new Card();
<< undefined
>> console.dir(useCard)
<< Card
	__proto__: Object
      constructor: ƒ Card()
      hidden: 'good'
      __proto__: Object

생성자(함수)의 몸체 부분에 어떠한 코드도 작성하지 않았는데 이를 통해 생성한 useCard객체가 __proto__라는 프로퍼티를 갖고있습니다.

여기서 _proto_ 는 Prototype Link로서 **객체의 생성에 쓰인 생성자 함수의 Prototype object**를 가리키고 있습니다. 그렇기 때문에 Book 생성자 함수와 함께 생성된 Prototype object에 추가한 cover라는 프로퍼티가 보이는것을 확인할 수 있습니다.

프로토타입 체인(Prototype Chain)

프로토타입 체인은 객체의 property를 사용할때 해당 property가 없다면, __proto__ property를 이용해 자신의 생성에 관여한 함수(생성자 함수)의 Prototype object에서 property를 찾습니다. 만약 Prototype object에도 해당 property가 없다면 다시 Prototype object의 _proto_ property를 이용해 Prototype object에서 property를 찾습니다. 이렇게 계속 반복이 이루어지며 해당 property를 찾게 된다면 값을 반환하고 찾지 못한다면 undefined를 반환합니다. 이렇게 __proto__ property를 통해 상위 프로토타입과 연결되어 있는 형태를 프로토타입 체인(Chain)이라고 합니다.