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

 

번호 제목 글쓴이 날짜 조회 수
237 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 0
236 [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 file 황제낙엽 2023.02.02 0
235 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 0
234 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 0
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 0
232 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 0
231 CryptoJS 를 이용한 암호화 황제낙엽 2023.02.15 1
230 JSON 클래스가 지원하는 function 황제낙엽 2023.03.31 1
229 체크박스에 체크된 항목 개수 구하기 황제낙엽 2023.06.10 1
228 navigator.mediaDevices 황제낙엽 2023.08.21 1
227 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 황제낙엽 2023.08.21 1
226 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 1
225 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 1
224 (Copilot) JSON 객체의 내부 데이터 리스트 길이를 구하는 방법 황제낙엽 2023.03.30 2
223 배열에 대한 루프문 조회 (loop iterator) 황제낙엽 2023.03.01 3
222 (Copilot) 바닐라 스크립트가 뭐지? 황제낙엽 2023.02.24 7
221 Barcode Detection API 황제낙엽 2023.08.06 7
220 Arrow function 황제낙엽 2021.03.07 8
219 client 통신 기술 jquery ajax, fetch, axios 황제낙엽 2021.12.05 8
218 [펌] prototype (2) 황제낙엽 2009.04.02 9