sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
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은 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'가 됨. (생성된 객체가 아님!)
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
66 | 익스플로러용 스크립트 디버거 (Script Debugger for Windows NT 4.0 and Later) | 황제낙엽 | 2008.12.11 | 549 |
65 | 소숫점을 포함한 반올림 | 황제낙엽 | 2008.12.11 | 468 |
64 |
int * float 연산 오류
![]() | 황제낙엽 | 2008.12.11 | 499 |
63 |
JavaScript Form Validation
![]() | 황제낙엽 | 2008.11.24 | 517 |
62 | 정규식 정리 | 황제낙엽 | 2008.11.24 | 560 |
61 | setTimeout() / setInterval() 메소드 | 황제낙엽 | 2008.11.05 | 490 |
60 | [key:value] 형태로 object를 저장할 수 있는 Static영역의 해쉬맵 클래스 (Map) | 황제낙엽 | 2008.11.04 | 462 |
59 | String xml 파싱 | 황제낙엽 | 2008.11.03 | 521 |
58 | innerHTML | 황제낙엽 | 2008.11.03 | 485 |
57 | DOM과 innerHTML 방법에 대한 비교 분석 | 황제낙엽 | 2008.11.03 | 500 |
56 | 익명함수의 사용 | 황제낙엽 | 2008.10.14 | 457 |
55 | Javascript 내장객체 Array (배열) | 황제낙엽 | 2008.10.13 | 456 |
54 | 자바 스크립트에서 sleep 기능을~ | 황제낙엽 | 2008.10.02 | 451 |
53 | position스타일과 top, left스타일 | 황제낙엽 | 2008.09.24 | 434 |
52 | 자바스크립트에서 이벤트 처리에 대한 일련의 흐름 | 황제낙엽 | 2008.09.18 | 538 |
51 | 함수와 인자값 (arguments) | 황제낙엽 | 2008.08.12 | 424 |
50 | 중첩 함수, 함수 클로저 | 황제낙엽 | 2008.08.12 | 1339 |
49 | 재사용 가능한 일회용 객체 | 황제낙엽 | 2008.08.08 | 521 |
48 | 생성자 체인과 상속 | 황제낙엽 | 2008.08.08 | 352 |
47 | Public/Private 프로퍼티와 this | 황제낙엽 | 2008.08.08 | 378 |