이 글에서는 주로 자바스크립트 클로저에 대해 자세히 소개하고 있는데, 프론트엔드를 작성하는 학생들은 다 아실 거라 생각하고, 실제 프로젝트에서도 클로저가 어느 정도 활용됐을 거라 생각합니다. 그렇다면 폐쇄란 정확히 무엇이며 어떻게 발생합니까?
1. 클로저란 무엇인가요?
루안 선생님의 글에서 언급한
클로저는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다. Javascript 언어에서는 함수 내부의 하위 함수만 지역 변수를 읽을 수 있으므로 클로저는 간단히 "함수 내부에 정의된 함수"로 이해될 수 있습니다.
2. 클로저의 기능
하나는 함수 내부의 변수를 읽는 것이고, 다른 하나는 이 변수의 값을 메모리에 보관하는 것입니다.
3. 간단한 클로저 예시
function count() { let num = 0; return function add() { return ++num;
}
}let a = count();
a(); //1a(); //2
먼저 count() 함수에서 반환되는 함수인 count()의 반환 결과를 a에 할당합니다. 이때 count()에 정의된 지역변수 num이 메모리에 저장된다. a()가 처음 호출되면 ++num이 1이 반환되고, 두 번째로 a()가 호출되면 num이 1이므로 반환되는 결과는 2
4입니다. 클로저 생성 이유
많은 사람들이 이 문제에 대해 혼동하고 있다고 생각합니다. 그들은 함수가 함수를 반환하여 클로저를 형성한다고 생각합니다. 사실 이는 폐쇄 방법일 뿐, 이유는 아래에서 설명하겠습니다.
주요 이유는 JavaScript가 어휘 범위로 지정되어 있다는 것입니다. 즉, 함수 가 정의될 때 범위가 지정되었습니다 . 그런 다음 런타임 시 실제 실행 상황에 따라 런타임 범위가 할당됩니다. 이 두 범위를 통해서만 JS 기능이 올바르게 실행될 수 있습니다.
위의 예를 예로 들면 count()가 실행될 때 함수의 범위는
| 런타임 범위 num = 0 |
|---|
| lexical 범위 |
동안입니다. 실행 시 add 함수가 반환될 때 add 는 이때 definition 상태이므로 반환 시 생성되는 함수의 어휘 범위는 위 count()의 범위가 됩니다. 따라서 a()가 실행될 때 실제 범위는
| add 런타임 범위 |
|---|
| count 런타임 범위 num = 0 |
| count 어휘 범위 |
그래서 add가 호출될 때 처음에는 num이 0이므로 1을 반환하고 두 번째에는 2를 반환합니다.
5. 요약
위의 설명을 보면 클로저 생성 시 외부 함수의 로컬 변수(런타임 범위)가 내부 함수에 의해 어휘 범위로 메모리에 저장되는 것을 알 수 있습니다. function 이 메모리 블록은 기능이 해제될 때까지 해제되지 않습니다. 따라서 클로저를 사용할 때는 메모리 누수에 매우 주의해야 합니다.