-
클로저 (closure)Javascript 2016. 5. 30. 10:59
Prototype 와 함께 자바스크립트 특성에 가장 큰 축을 담당하는 클로저에 대하여 알아보자.
다음 예제를 보자.
<script type="text/javascript"> function A() { var Message = "over watch is fun"; function B() { alert(Message); } B(); } A(); </script>
위 예제에서 보면 A안의 B 라는 내부 함수가 A의 지역변수에 손쉽게 접근하는 것을 볼 수 있다.
그럼 또 하나의 예제를 더 보자.
<script type="text/javascript"> function A() { var message = "lucky is very important from hearthstone"; function B() { alert(message); } return B; } var BFN = A(); B(); </script>
이번에는 A함수가 B함수를 리턴하도록 변경하였고 B함수는 BFN = A() 즉 A함수를 수행한 뒤에 B() 함수가
실행된다.
분명 A() 함수는 종료 되었는데 아래 B() 함수에서 여전히 A()함수의 지역변수를 사용하고 있다.
이런 코드가 몇몇 개발자에게 직관적이지 않은 이유는 A() 함수의 지역변수는 A()가 종료된 시점에 사라져야
하지만 B()는 여전히 A()의 모든 것을 사용하고 있다.
(히히 니 것도 내거 , 내 것도 내거)
결론적으로 클로저는 함수뿐만 아니라 함수가 생성된 환경이라고도 할 수 있다.
위 예제 같은 경우 B() 함수는 A()함수의 A()함수가 생성될 때 존재했던 (모든 변수 포함) 환경 변수를 포함하는
클로저 객체 라고 할 수 있다.
이 클로저가 비동기식 프로그래밍에서 아주 중요한 이유는 자바스크립트는 함수가 다른함수에 인수로 전달이
가능한 일등급 객체이기 때문이다. ( 콜백함수를 생각하면 된다. )
이벤트가 전송될 때 콜백 함수가 호출되며, 심지어 부모 함수가 이미 수행됬어도 콜백 함수는 이미 부모함수의
생각을 모두 훔쳤기에 생성할 때 존재했던 어떤 변수도 조작 할 수 있다.
(끝)
'Javascript' 카테고리의 다른 글
ES6 2부 - Arrow function, 객체 리터럴 , 2진수, 8진수 (0) 2016.08.18 ES6 1부 - let , const , 배열과 객체 (1) 2016.08.17 Angular.js 의 작동원리 (1) 2016.06.27 javascript 에서 for loop 를 사용할 때 (0) 2016.06.26 프로토타입 (Prototype) 1부 (0) 2016.06.13