Prototype 생성자 체인과 상속

황제낙엽 2008.08.08 17:22 조회 수 : 2864 추천:72

sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://자바 스크립트 for 웹2.0 - 오레일리 
extra_vars6 sitelink1 
자바스크립트는 전형적인 객체지향 언어가 아니며 그 범주에 넣으려고 해서도 안된다. 
대신 나름대로의 장점을 인정하고 잘 활용하면 그만이다. 
그렇지만 프로그램 개발 시에 전통적인 객체 지향 설계 기법 중에서도 유용한 것들이 많다. (캡슐화라 불리는 객체지향 설계 기법등...)

상속은 다른 객체의 메소드와 프로퍼티를 새로운 객체에 병합 또는 상속시키는 것이다. 
이는 클래스 기반 개발의 근간이다.
새로운 클래스가 다른 클래스로부터 상속받은 기능 중의 일부를 재정의할 수 있기 때문이다. 
자바스크립트도 1.3 버전부터 apply와 call 함수를 이용하여 이를 흉내 낼 수 있게 되었다.

함수를 사용하여 새로운 객체를 정의하면, 이 함수는 곧 객체 생성자가 되고, new 키워드로 객체를 생성할 때 호출된다.
·
theobj = new DivObj(params);


apply와 call 메소드를 사용하면, 다른 객체의 컨텍스트 내에서 메소드를 적용하거나 호출할 수 있다.
자식 객체 생성자 안에서 사용하면 부모 객체의 모든 프로퍼티와 메소드를 상속받도록 생성자들을 연결시킨다.
두 메소드는 전달되는 인자만 다르고 동작 방식은 같다. 
call 메소드의 첫번째 인자에는 자기 자신(this로 표시)을 입력하고, 두 번째 인자에는 부모 객체의 생성자에 전달하려는 인자를 입력한다.

obj.call(this, arg1, arg2, arg3, ... , argn);  


apply 메소드에는 두 가지(자식 객체(this)와 자식 객체의 인자 배열)를 인자로 넘겨준다. 
위의 예에서는 부모 객체 생성자의 인자가 2개(title, type)이고, 자식 객체 생성자의 인자가 3개 (title, type, artist)이다. 
따라서 부모 객체 생성자로 넘겨주는 인자는 title, type의 2개이다.

obj.apply(this, arguments);  


인자 집합을 공유하는 경우엔 apply를 사용하고 그렇지 않다면 call을 사용한다.

다음의 예제에서는 apply와  체인 생성자를 사용하여 상속을 구현했다.
첫 번째로 생성되는 tune 객체에는 노래 제목과 장르 정보가 저장된다. 
그리고 두 정보를 문자열로 반환해주는 메소드를 가지고 있다.
두 번째 artist_tune 객체는 가수를 저장하는 프로퍼티와 모든 프로퍼티를 문자열로 반환하는 메소드를 가지고 있다.
artist_tune 의 생성자에서는 tune 함수(객체)가 apply 메소드를 직접 호출하고 있다. 
이렇게 하면 tune의 생성자가 호출되는데 이를 체인 생성자라고 하고, 결과적으로 artist_tune 객체가 tune 객체의 프로퍼티와 메소드를 상속받게 된다. 
두 객체를 모두 정의하고 나서 artist_tune 프로토타입에 tune 생성자를 배정한다.

<script>  
function Tune(title, type) {   
    this.title = title;   
    this.type = type;   
    this.getTitle = function() {   
        return "Song: " + this.title + " Type: " + this.type;   
    };
}   
function ArtistTune(title, type, artist) {   
    this.artist = artist;   
    this.toString("Artist is " + artist);   
    Tune.apply(this, arguments);   
    this.toString = function() {   
        return "Artist : " + this.artist + " " + this.getTitle();   
    };
} 
ArtistTune.prototype = new Tune();   

var song = new ArtistTune("I want to hold your hand", "rock", "Beatles");   
alert(song.toString());
</script>  

call과 apply는 참 편리한 메소드다. 하지만 때때로 사용자 정의 객체를 생성할 때 상속이나 클래스가 필요치 않은 경우도 있다.
이런 경우에는 객체 하나면 충분하다.


상속 : ChildObject.prototype=new SuperObject;
Prototype chain : ChildObject.prototype.superFunc=SuperObject;
번호 제목 글쓴이 날짜 조회 수
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