Prototype [펌]JavaScript Class 만들기

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

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) 였습니다.

번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894