Prototype 중첩 함수, 함수 클로저

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

sitelink1 http://자바 스크립트 for 웹2.0 - 오레일리 
sitelink4 http://1 
extra_vars4 ko 
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

 

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