Prototype 중첩 함수, 함수 클로저

황제낙엽 2008.08.12 14:25 조회 수 : 820 추천:98

sitelink1 http://자바 스크립트 for 웹2.0 - 오레일리 
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5  
extra_vars6 sitelink1 

1. 중첩함수의 형태

 

function outer (args) {   
    function inner (args) {   
        inner statements;   
    }   
}

 

2. 중첩함수의 기본 영역 규칙
안쪽 함수는 바깥쪽 함수의 영역 내에서만 동작하며, 바깥 함수의 변수와 인자에 접근할 수 있다.
하지만 바깥 함수는 안쪽 함수의 변수에 접근할 수 없고, 호출 프로그램 또한 안쪽 함수에 접근할 수 없다.

3. 중첩함수의 예외
기본규칙의 예외로써 함수 리터럴로 생성되고 호출 프로그램에 반환하는 경우는 예외다.

4. 중첩함수의 예외 예제 (클로저 예제)

 

 

<script type="text/javascript">
// 바깥쪽 함수   
function outerFunc(base) {   
    var punc = "!";   
    // 안쪽 함수   
    function returnString(ext) {   
        return base + ext + punc;   
    }   
    return returnString;   
}   
  
// 안쪽 함수로의 접근을 생성한다.   
var baseString = outerFunc("Hello ");   
안쪽 함수 리터럴을 변수로 받는다.   
이때 변수 base 에는 "Hello " 문자열을 할당한다.   
  
// 안쪽 함수는 여전히 바깥쪽 함수 인자에 접근할 수 있다.   
var newString = baseString("World");   
document.writeln(newString);   
함수포인터 baseString(안쪽 함수 리터럴)을 수행하고 결과를 newString에 대입하고 출력한다.   
이때 변수 ext 에 "World" 문자열을 할당하고, 이미 할당된 변수 base 값과 함께 출력한다.   
  
// 여기서도 마찬가지다.   
var notherString = baseString("Reader");   
document.writeln(notherString);   
다시 안쪽 함수 리터럴을 수행하고 결과를 출력한다.   
이때 변수 ext에 "Reader" 문자열을 할당하고, 이미 할당된 변수 base 값과 함께 출력한다.   
  
// 바깥쪽 함수의 실행 결과로 또다른 인스턴스를 생성한다.   
var anotherBase = outerFunc("Hiya, Hey ");   
이번엔 새로운 변수(anotherBase)에 바깥쪽 함수 리터럴(outerFunc)의 수행 결과(안쪽 함수 리터럴)를 담는다.   
이때 변수 base 에는 "Hiya, Hey " 문자열을 할당한다.   
  
// 새로운 지역 문자열   
var lastString = anotherBase("you");   
document.writeln(lastString);   
안쪽 함수 리터럴(anotherBase)을 수행하고 결과를 변수 lastString에 대입하고 출력한다.   
이때 변수 ext 에 "you" 문자열을 할당하고, 이미 할당된 변수 base 값과 함께 출력한다. 
</script>


5. 클로저의 개념
자바스크립트 프로그램에서는 새로운 영역을 생성할 때마다 이를 둘러싸기 위한 '연관 영역 버블'이 생성된다.
이는 함수에도 적용되며, 해당 함수는 자신의 영역에서 동작하게 된다.

일반적으로 함수가 종료되면, 그 영역도 해제된다. 왜냐하면 더 이상 필요치 않기 때문이다.
하지만 안쪽 함수의 경우엔 이것이 바깥쪽 프로그램에 반환되고 외부 변수에 할당된다.
즉, 안쪽 함수의 영역이 바깥쪽 함수의 영역에 추가되고, 결국 호출 프로그램에 추가되는 것이다.
따라서 함수 리터럴 및 바깥쪽 함수의 인자와 변수를 유지하게 된다.
다른 함수 내에서 내부 객체로 생성된 함수 리터럴을 반환하여 호출 프로그램에서 이를 변수로 배정한 것을 자바스크립트에서는 클로저(closure)라고 한다.
즉, 함수가 동작하는 데 필요한 데이터 영역이 확장되는 것이다.

6. 클로저에 대한 참조 사이트
http://jibbering.com/faq/faq_notes/closures.html

 

번호 제목 글쓴이 날짜 조회 수
» 중첩 함수, 함수 클로저 황제낙엽 2008.08.12 820
29 Defining classes and inheritance (클래스 정의와 상속) 황제낙엽 2011.03.24 392
28 JavaScript Closures for Dummies 황제낙엽 2009.04.08 227
27 [펌] 아사페릴의 사생활 - Code Conventions for the JavaScript Programming Language 황제낙엽 2009.04.02 194
26 자바스크립트의 데이터 타입과 변수 황제낙엽 2008.08.06 179
25 [펌] 아사페릴의 사생활 - Javascript의 constructor 와 prototype 황제낙엽 2009.04.02 156
24 재사용 가능한 일회용 객체 황제낙엽 2008.08.08 133
23 inherits() 를 이용한 상속 황제낙엽 2012.07.18 129
22 [펌] 아사페릴의 사생활 - 싱글톤 패턴을 지향한 Javascript Module Pattern 황제낙엽 2009.04.02 90
21 상속과 Super 로의 접근 황제낙엽 2012.09.18 64
20 체인 생성자(생성자 체인), 프로토타입 체인 그리고 생성자 재지정 황제낙엽 2009.08.12 55
19 [key:value] 형태로 object를 저장할 수 있는 Static영역의 해쉬맵 클래스 (Map) 황제낙엽 2008.11.04 46
18 [펌] 아사페릴의 사생활 - prototype과 __proto__ 와 constructor 황제낙엽 2009.04.02 41
17 생성자 체인과 상속 황제낙엽 2008.08.08 24
16 [펌] 아사페릴의 사생활 - __proto__ 와 construct 와 prototype 황제낙엽 2009.04.02 23
15 [펌]자바스크립트에서 객체 생성 방법 황제낙엽 2008.08.07 21
14 Object 와 Prototype 황제낙엽 2008.08.08 21
13 [펌] TAEYO.NET - JavaScript OOP 코어객체와 prototype를 사용한 객체확장 황제낙엽 2009.04.02 21
12 [펌]객체지향 자바스크립트 file 황제낙엽 2008.08.06 20
11 [펌]Function과 객체, this 키워드의 관계 황제낙엽 2008.08.07 19