Prototype [펌]JavaScript Class 만들기

황제낙엽 2008.08.07 14:29 조회 수 : 18 추천:111

sitelink1  
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://cafe.naver.com/swnara/50 
extra_vars6 sitelink1 

Javascript로도 class를 만들 수 있다.

우선, class에 대해서 아주아주 간단히 짚어 보자.

    1) class는 생성자를 갖는다.
        예를 들어, Array를 보도록 하자.
        var  arr = new Array();
        Array는 객체다. Array를 사용하기 위해서는 new Array()라는 형태로 생성해 주어야 하는데
        이 때, Array()처럼 class명과 동일한 이름의 함수를 생성자라고 한다.
 
    2) class는 member변수를 갖는다.
        var arr = new Array();
        alert( arr.length ); -> '0'을 출력해 줄것이다.
        위에 보이듯이 arr.length의 length는 Array의 member변수이다.
   
    3) class는 method를 갖는다.
        method는 function을 말하며, Array의 경우
        var arr = new Array();
        alert( arr.toString() );
        처럼, toString()이라는 method를 갖는다.
   
그럼, 이제 간단한 class를 만들어 보도록 하자.
지금부터 만들 class는 두개의 숫자를 입력받아 그 합을 출력하며,
그 합을 member변수에 기억시켜두는 기능을 갖고 있다.


    1) 1번째 방법
       
        var Class1 = function()  // 생성자
        {
            // member변수
            this.sum = 0;
        };
       
        Class1.prototype.add = function( a, b )  // method add()
        {
            this.sum = a + b;
            return this.sum;
        };


    2) 2번째 방법
       
        function Class1()
        {
            // member변수
            this.sum = 0;
           
            // method
            this.add = addNum;
        }
       
        function addNum( a, b )
        {
            this.sum = a + b;
            return this.sum;
        }

        

    3) 3번째 방법
        // 개인적으로 이 방법이 제일 맘에 든다. 
            소개한 3가지 방법은 내부적으로 중요한 차이점이 있다. 이를 이해하기 위해서는 prototype 과 construct 에 대해서 학습해야 한다.


        function Class1()
        {
            // private 변수
            var m_sum = 0;
           
            // public 변수 및 method
            this.sum = 0;
            this.add = addNum;
           
            // private method
            function addNum( a, b )
            {
                m_sum = a+b;
                this.sum = m_sum;
            }       
        }


    4) 사용예
   
        var sam = new Class1();
        sam.add(11, 22) );

        alert( "" + sam.sum );          // "33" 출력
   
   
   
이상, 별문지기(www.swnara.com) 였습니다.

번호 제목 글쓴이 날짜 조회 수
57 Javascript delete 황제낙엽 2012.06.11 20
56 익명함수의 사용 황제낙엽 2008.10.14 20
55 [펌]객체지향 자바스크립트 file 황제낙엽 2008.08.06 20
54 XP 에서 input type=text 와 input type=password 의 사이즈가 틀리게 보일때 황제낙엽 2004.08.04 20
53 Early return, early exit - 스크립트 가독성 개선 팁 황제낙엽 2021.03.07 19
52 [펌]Function과 객체, this 키워드의 관계 황제낙엽 2008.08.07 19
51 숫자값으로의 변환 형태 황제낙엽 2009.09.02 18
50 이미지 로드 코드 황제낙엽 2009.06.27 18
49 [펌] TAEYO.NET - Js OOP - 나만의 프레임워크 만들기 황제낙엽 2009.04.02 18
» [펌]JavaScript Class 만들기 황제낙엽 2008.08.07 18
47 SpiderMonkey 를 이용한 개발 일기 file 황제낙엽 2008.07.14 18
46 슬라이딩 메뉴 황제낙엽 2005.12.02 18
45 풍선 도움말 황제낙엽 2005.11.24 18
44 브라우저의 스크롤을 따라다니는 레이어 두번째 file 황제낙엽 2002.12.20 18
43 [펌] 아사페릴의 사생활 - Javascript의 클래스에 관한 이야기 황제낙엽 2009.04.02 17
42 Boolean 데이터 타입 황제낙엽 2009.09.02 16
41 [펌] TAEYO.NET - Js OOP - 사용자 정의 객체. 그리고 상속과 재사용 황제낙엽 2009.04.02 16
40 마우스 오버시 살짝 뒤로 물러나는 듯한 링크 -_-;; 황제낙엽 2003.01.04 16
39 자바스크립트 쿠키 황제낙엽 2009.06.11 15
38 [펌] 아사페릴의 사생활 - __proto__ 와 prototype에 대해.. 황제낙엽 2009.04.02 15