Prototype [펌]Function과 객체, this 키워드의 관계

황제낙엽 2008.08.07 13:55 조회 수 : 2587 추천:122

sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://zoonoo.egloos.com/4203424 
extra_vars6 sitelink1 
1. Function이란?
Function은 String, Array와 마찬가지로 자바스크립트의 내장객체(함수객체라 한다)이며 따라서 아래의 표현식은 모두 동일하다.
(function 기본 기능만을 본다면 동일하지만 각각 역할은 틀리다)
function A() {...}

var A = function() {...}

var A = new Function('...');

2. Function과 객체.
Function은 new 와 함께 사용하면 객체에 대한 생성자로 활용 할 수 있다.
(new 키워드를 통해 function 의 기본 기능을 확장한 클래스를 생성 가능한 것이다.
function 블럭은 클래스와 객체로 구성되기 위한 구조(맴버변수와 함수를 가질 수 있는 영역)를 가지고 있기 때문이다.)


function A() {...}

var o = A(); -- A함수를 호출 - o는 A의 반환값.
var o = new A(); -- A함수를 생성자로 사용하여 객체 생성 - o는 A를 통해 생성된 객체.

3. Function과 this
Function 내부에서는 this의 키워드를 사용 할 수 있으며 this의 값은 Function을 함수로 사용하거나 객체의 생성자로 사용할 때 값이 달라진다.

function A() {
  alert(this.location);
}


A(); -- 함수로 사용할때 - this는 window 객체로 할당되며 따라서 window.location (브라우저의 주소값)이 출력됨.
new A(); -- 생성자로 활용할때 - this는 빈 Object로 할당되고 빈 Object에는 location프로퍼티가 없으므로 undefined가 출력.

4. Function와 return
함수를 생성자로 활용 할 때는 return의 사용에 주의해야 한다. 아래의 코드는 둘 다 결과값이 동일하다.
(new 키워드는 자바스크립트가 OOP를 지원하기 위한 메커니즘이 숨어 있으며 메모리 할당시 prototype과 construct 와
유기적인 관계를 가지게 된다. new 와 메모리 할당에 대해 좀더 세부적으로 학습할 필요가 있다.)

function A() {
this.name = 'a';
return 'x';
}

var o = A();

-- 1. A함수 호출.
-- 2. this는 window로 할당
-- 3. window.name 은 'a' 할당
-- 4. 'x' 반환
-- 5. o는 'x'가 됨.
var o = new A();
-- 1. new에 의해 빈 Object생성 하고 A를 생성자로 호출
-- 2. this는 빈 Object로 할당
-- 3. 빈 Object의 name프로퍼티에 'a'할당
-- 4. 'x'반환
-- 5. o는 'x'가 됨. (생성된 객체가 아님!)
번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3988
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3843
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3358
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3673
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3383
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3760
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3815
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3274
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3623
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3364
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3607
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4211
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3666
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3716
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3674
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3705
229 navigator.mediaDevices 황제낙엽 2023.08.21 3800
228 Barcode Detection API 황제낙엽 2023.08.06 3859
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2895