13. Javascript 객체지향 프로그래밍(1) - 클래스 구현 1

 

우선 JAVA나 C# 등의 객체지향 프로그래밍 언어와 Javascript에서의 클래스 구현 방식과 개념은, 상당히 다른 구조로 설계되어 있습니다. 전자가 기본적으로 클래스 구조가 설계도로서 존재하고, 이를 바탕으로 인스턴스가 생성되는 구조인데 반해 Javascript는 모든 것이 객체를 중심으로 돌아갑니다. 현재로서는 자세히 이해가 가지 않을 수 있지만, 일단은 이렇게 기억합시다. Javascript의 객체 중심의 구조를 통해, 다른 프로그래밍 언어에서 사용하는 클래스의 개념을 구현한다 - 정도로요.

 

우선, 이 챕터의 아티클을 학습하기 위해서는 앞서 배웠던 프로토타입( [[Prototype]], prototype )에 대한 이해가 선행되어야 합니다. 중간에 이해가 가지 않는 부분이 있다면, Javascript의 프로토타입 개념 전반에 대해 다시 학습하시는 것을 추천드립니다. 

 

 

---

 

우선, 아래의 예제 코드를 확인해보도록 하겠습니다. 우리가 배웠던 "new" 키워드를 사용해 생성자 함수를 사용하는 일반적인 형태의 코드입니다.

 

function Rapper(arg) {
    this.name = arg;

    this.getName = function() {
        return this.name;
    }

    this.setName = function(value) {
        this.name = value;
    }
}

var hype = new Rapper("Fleaky Bang");
console.log(hype.getName());

hype.setName("GANG");
console.log(hype.getName());

 

위 예제를 이해하는 것 자체는 크게 무리가 없을 것입니다. Rapper라는 클래스를 이용해 hype라는 새로운 Rapper 객체를 생성했고, 여기에 사용되는 name이라는 변수 그리고 getName( )과 setName( )이라는 프로퍼티가 존재하는 객체를 볼 수 있습니다. 

 

이는 JAVA와 같은 OOP 언어에서는 아주 일반적인 구조입니다. 하지만, Javascript 관점에서 이 구조는 상당히 '낭비'가 있습니다. 만일 여기에 hype외에 동일한 형태의 객체를 2개 더 생성했다고 가정해 볼까요? JAVA와 같은 경우에는, 이렇게 객체(인스턴스)가 3개가 존재하게 된다면, 각각의 인스턴스에 변수(name)이 개별적으로 존재하되 메서드(getName, setName)의 코드는 메서드 영역이라는 공통 영역에 존재하게 됩니다. 

 

하지만, Javascript에서 생성자 함수 Rapper를 통해 3개의 객체를 더 생성하게 된다면 아래의 그림과 같이 공통된 값을 가진 "동일한 객체 3개"가 생성되는 형태가 됩니다. 특히 메서드가 중복해서 생성되는 것이 문제입니다. 

 

동일한 객체 4개가 생성된 구조가 됩니다

 

---

 

이러한 낭비를 해결하는데, 바로 prototype 개념이 사용됩니다. 우리는 앞서 객체의 prototype의 속성에 대해서 배운적이 있죠? 여기서는 간단하게 Rapper의 prototype 객체 안에 getName과 setName을 선언해서 Rapper객체를 통해 생성된 객체에서 공통으로 사용할 수 있는 메서드로 만들어 보겠습니다. 

 

function Rapper(arg) {
    this.name = arg;
}

Rapper.prototype.getName = function() {
    return this.name;
};

Rapper.prototype.setName = function(value) {
    this.name = value;
};

var hype = new Rapper("Fleaky Bang");
console.log(hype.getName());

hype.setName("GANG");
console.log(hype.getName());

 

잘 기억하고 계실지 모르겠지만, 생성자 함수로 사용되는 객체에서 prototype 객체의 메서드로 선언된 함수의 경우 new 키워드를 통해 생성된 객체에서는 [프로토타입 체이닝]에 따라 동일하게 사용될 수 있다는 점을 배웠습니다. 여기서 사용되는 this의 경우, 여기서는 'new를 통해 생성된 객체'에 바인딩된다는 사실도 배웠습니다. 결과적으로는 동일한 값을 출력하게 되었습니다. 

 

 

잊지 않으셨죠? 생성자 함수를 통해 new 키워드로 생성된 객체는 생성자 함수 객체의 prototype 객체를 [[Prototype]]으로 지향하게 된다는 점을 다시 상기해 보시기 바랍니다.