Prototype [펌] prototype (2)

황제낙엽 2009.04.02 20:13 조회 수 : 3045 추천:105

sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://jaures.egloos.com/2263963 
extra_vars6 sitelink1 
prototype은 모든 instance가 공유하는 property라고 생각하면 된다. (다른 언어에서는 마치 class 객체와 같은 형태)

하지만 다른 언어와는 달리 prototype은 runtime 중에 얻어 오거나 또는 변경이 가능하며, 새로 추가하거나 삭제도 가능하다. 모두 runtime 중에 말이다. 

모든 변경에 대한 내역은 해당 작업이 이루어지는 순간 즉시 반영이 되게 되기 때문에, 이미 instance가 생성된 객체에서도 변경한 내용을 바로 사용할 수 있다.

이것이 가능한 일은 Javascript는 컴파일 되지 않고 요청이 있을때마다 동적으로 요청된 property를 찾기 때문인데 다음의 예를 살펴보자.

A 객체가 B의 객체를 상속받는 과정을 생각해 보자. (B.prototype -> A.prototype)
A 객체의 instance가 생성된 a (var a = new A())가 있다고 할때, a의 property를 요청하면 다음과 같은 과정을 거치게 된다.

1. Javascript는 a 객체에서 요청된 property가 해당 객체에 존재 하는지를 확인한다. 찾지 못했다면 다음 과정으로 이동한다.

2. Javascript는 a의 prototype 객체인 "A.prototype"에서 해당 property를 찾는다. 여기서도 찾지 못했다면 다시 다음 과정으로 이동한다.

3. Javascript는 마지막으로 A가 상속받은 "B.prototype"에서 요청된 property를 찾고 해당 property를 return 하게 된다.

이와 같이 각 객체의 prototype에 대한 검색은 요청된 property를 찾기위해 root property까지 계속된다. 이렇게 각 객체마다 연결된 형태를 "prototype chain" 이라고 한다.

* 참고 : 현재 object에서 property를 찾는 속도는, prototype chain을 통해 검색하는 것보다 약 25%의 빠르다고 한다. 즉, prototype을 통해 상속받은 property가 아닌 현재 object에 존재하는 property를 얻어오는 것이 더 빠르다는 의미이다. - High Performance Ajax Application, p17
    
    
다음과 같은 function A가 있다고 하자.

function A() { ... }

new A() 가 실행되면, 실제로는 2개의 객체가 생성된다. constructor 객체 "A"와 constructor와 연관된 익명의 prototype 객체 "A.prototype".

객체의 instace를 다음과 같이 생성하면,

var a = new A();

Javascript는 instance 객체인 "a"와 constructor의 prototype인 "A.prototype"간에 permanent link를 생성하게 된다. 이건 외부에 노출되지 않는 "private prototype" 이다. 다음의 코드를 통해 이를 확인해 볼수 있다.

Array의 push() 를 재작성 한다고 할때에 다음과 같이 작성한다.

1) Array.prototype.push = function () { ... };

또는 

2) var a = new Array();
    a.constructor.prototype.push = function () { ... }

a.contruct.protype 즉, private prototype을 이용해 상위의 Array.prototype에 접근하고 있다. 1과 2는 동일하다.


번호 제목 글쓴이 날짜 조회 수
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