Javascript OOP - Prototype

prototype 이란 자바스크립트에 존재하는 모든 객체가 가지고 있는 속성이다.
빈 객체도 기본적으로 [[prototype]] 을 가진다.  (* [[prototype]] 은 internal property)

간단하게 확인하는 방법

구글 크롬을 실행해서 '개발자 도구'를 연다.
그리고 Console 창에 new Object() 라고 입력한 뒤 실행한다. 빈 객체지만 __proto__ 속성이 있는걸 볼 수 있다.

* [[prototype]]이 어떻게 정의되어 있는지는 브라우저마다 다를 수 있다.

Prototype 에 메쏘드 정의하기

function enlarge() {
    this.width *= 2;
    this.height *= 2;
}

// 생성자 함수
function Rectangle(w, h) {
    this.width = w; 
    this.height = h;
}

//prototype에 정의
Rectangle.prototype.enlarge = enlarge;
var rect = new Rectangle(100, 200);
rect.enlarge();  // 모든 인스턴스에서 공유된다.

브라우저에서 지원하는 기본 내장 객체에 대해서도 prototype에 속성을 추가하거나 삭제할 수 있다. 익스플로어의 경우 배열 객체에 unshift 메쏘드가 없는데 아래 소스 코드는 unshift  메쏘드를 추가해서 다른 브라우저와 호환이 되게 한다.

if(!Array.prototype.unshift) { // 객체 탐지
    Array.prototype.unshift = function () {
        this.reverse();
        var a = arguments, 
        var i = a.length;
        while(i--) {
            this.push(a[i]);
        }
    
        this.reverse();
        return this.length;
    };
}

var myArray = new Array(1, 2, 3, 4);
myArray.unshift('a');
console.debug(myArray);

내장 객체의 프로퍼티를 임의로 재정의할 때는 주의해야 한다. 다른 사람이 소스 코드를 읽었을 때 기존에 동작하던 방식과 다를 경우 혼란스러울 것이다. 또한 변경한 프로퍼티를 firebug 등 디버깅 툴이 내부적으로 호출하는 경우라면 원하지 않는 결과값을 얻을 수 있으며 버그 찾기 또한 힘들 것이다.