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

 

앞서 살펴본 클래스 구현 예시는, 생성자 함수를 선언하고 나서 new 키워드를 통해 이 생성자 함수를 [[Prototype]]으로 바라보게 되는 객체를 생성해 부모-자식의 관계를 형성하는 기본적인 예제를 살펴보았습니다. 이와 관련하여, 더글라스 크락포드가 제시한 prototype 기반의 메서드 선언 방식도 살펴보도록 하겠습니다. 

 

아래 예제 코드는 최상위 Function 객체의 프로토타입에 정의한 메서드입니다. 해당 메서드를 통해, 특정 객체의 프로토타입 메서드를 선언하는 구조를 살펴봅시다. 

 

Function.prototype.method = function(name, func) {
    if(!this.prototype[name]){
        this.prototype[name] = func;
    }
};

 

위에서 선언한 method라는 이름의 메서드 코드 내용이 이해가 가시나요? 잘 와닿지 않으면 풀어서 설명해 보겠습니다. 우선 해당 메서드는 최상위 객체인 Function의 프로토타입 메서드로 선언되었습니다. 그래서 모든 객체에서 사용할 수 있는 메서드죠. 객체.method(name, func); 형태로 호출하게 됩니다. 

 

이때, 첫 번째 파라미터 name은 이 함수를 호출하는 객체의 프로토타입 메서드가 갖게 될 메서드 이름입니다. 그렇기에 String으로 작성되어야겠죠. 그리고 func는 함수의 선언 내용이 들어가게 됩니다. 

 

특정 객체에서 이 함수를 선언하게 되면 우선 if문을 통해, 호출한 객체의 프로토타입 메서드 중에 name과 같은 이름을 가진 프로토타입 메서드가 있는지를 검사하게 됩니다. 여기 선언문에서는, 만일 해당 프로토타입 메서드가 없다고 판단하면 해당 객체의 프로토타입 메서드를 두 번째 인자로 전달한 함수 선언문을 대입하여 프로토타입 메서드를 선언하게 되는 구조입니다. 

 

우리가 앞의 아티클에서 선언했던 함수를 이 메서드를 통해서 동일하게 선언해 보도록 하겠습니다. 

 

Function.prototype.method = function(name, func) {
    if(!this.prototype[name]){
        this.prototype[name] = func;
    }
};

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


Rapper.method("setName", function(value){
    this.name = value;
});

Rapper.method("getName", function(){
    return this.name;
});

/*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());

 

앞서 살펴본 아티클의 예제 중, Rapper 객체의 프로토타입 메서드를 직접 선언한 부분을 method 메서드로 변경하여 사용해 보았습니다. 당연히 결과는 동일합니다.