Prototype을 알아보자

Author: 니용

---

자바스크립트를 사용하면서 함수를 커스터마이징해서 사용하는 개발자분들이 꽤 많을 것입니다.

자바스크립트 문서에서 많은 함수를 제공해주지만, 일부는 제공하지 않거나 같은 함수명을 가져 호출하였을 때 컴파일러가 인식하기 모호한 함수도 존재하거든요.

그래서 이번 글에서는 특정 타입에 대해 함수를 설정하고 직접 호출해서 사용해도 무리가 없는 방법을 알려드리려 합니다.

 

그 전에 알아두어야 할 사전 지식이 있는데요, 바로 Prototype이라는 것입니다.

 

Prototype

보통 Java의 Class와 비교를 많이 합니다. Java에는 Class를 기반으로 객체지향언어가 선언되어 있다면 JavaScript는 Prototype 기반의 언어라고 하여도 됩니다.

Java는 Class에 지정되어 있는 메소드를 호출해서 사용하거나 사용자가 다른 유틸 클래스를 만들어서 사용하지만, JavaScript는 그럴 필요 없이 직접 선언과 사용이 가능하도록 되어 있습니다.

해당 .js 파일이 위에서 호출되었다는 조건 하에요.

 

__proto__

 

보통 Object를 console.log로 출력하면 이런 녀석들이 뜨곤 합니다. 

이 친구의 정체는 Object가 생성되는 생성자가 호출되면 기본적으로 가지고 있는 속성입니다. 

역할은 그 Object의 링크 역할을 하며 위에서 말씀드린 Object.prototype을 참조할 수 있도록 열어주는 Prototype Link입니다. 즉, 직접 호출이 가능하죠. 

 

예제를 한 번 살펴보겠습니다.

function Abbo() {}

Abbo.prototype.admin = "Niyo";
Abbo.prototype.auth = 1;

let abbo = new Abbo();  // __proto__ 가 같이 만들어짐
console.log(abbo.admin); // Niyo

여기서 __proto__가 Abbo 객체 내에 admin이라는 속성이 있어 그 녀석을 호출할 수 있도록 해준 것입니다.

 

Prototype 사용 예시

아래 프로토타입 함수들은 공통으로 사용하였을 때 용이하여 정해둔 프로토타입 정의 함수입니다.

String.prototype.replaceAll = function(searchStr, replaceStr) {
    return this.split(searchStr).join(replaceStr);
};
String.prototype.toKorChars = function () {
    var cCho = ['ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'],
        cJung = ['ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ'],
        cJong = ['', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'],
        cho, jung, jong;

    var str = this,
        cnt = str.length,
        chars = [],
        cCode;

    for (var i = 0; i < cnt; i++) {
        cCode = str.charCodeAt(i);

        if (cCode === 32) {
            continue;
        }

        // 한글이 아닌 경우
        if (cCode < 0xAC00 || cCode > 0xD7A3) {
            chars.push(str.charAt(i));
            continue;
        }

        cCode = str.charCodeAt(i) - 0xAC00;

        jong = cCode % 28; // 종성
        jung = ((cCode - jong) / 28) % 21 // 중성
        cho = (((cCode - jong) / 28) - jung) / 21 // 초성

        chars.push(cCho[cho], cJung[jung]);
        if (cJong[jong] !== '') {
            chars.push(cJong[jong]);
        }
    }

    return chars;
};
Date.prototype.format = function(f) {
    if (!this.valueOf()) return " ";

    var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
    var d = this;

    return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) {
        switch ($1) {
            case "yyyy": return d.getFullYear();
            case "yy": return (d.getFullYear() % 1000).zf(2);
            case "MM": return (d.getMonth() + 1).zf(2);
            case "dd": return d.getDate().zf(2);
            case "E": return weekName[d.getDay()];
            case "HH": return d.getHours().zf(2);
            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2);
            case "mm": return d.getMinutes().zf(2);
            case "ss": return d.getSeconds().zf(2);
            case "a/p": return d.getHours() < 12 ? "오전" : "오후";
            default: return $1;
        }
    });
};
String.prototype.string = function(len){var s = '', i = 0; while (i++ < len) { s += this; } return s;};
String.prototype.zf = function(len){return "0".string(len - this.length) + this;};
Number.prototype.zf = function(len){return this.toString().zf(len);};