[JavaScript] 몇 초 안에 클로저 이해하기

클로저는 JavaScript의 기본 아이디어이지만 초보자에게는 클로저가 모호하고 이해하기 어려울 수 있습니다. 특히 ECMA 표준의 정의는 실제 경험이 없으면 이해하기 어려울 수 있습니다. 따라서 이번 포스팅에서는 클로저 개념을 길게 설명하기보다는 실제 코드를 사용하여 이해하기 쉽도록 하겠습니다.

1. 폐쇄

function A(name){
    function B(){
       console.log(name);
    }
    return B;
}
var C = A("Closure");
C();//Closure

가장 간단한 클로저입니다.

이제 기본 사항을 알았으니 이것이 일반적인 기능과 어떻게 다른지 간략하게 살펴보겠습니다. 위의 코드를 자연어로 번역하면 다음과 같습니다.

1. 인수 이름을 사용하여 일반 함수 A 정의
2. A에 일반 함수 B를 정의하고, B에는 외부 변수명을 참조하세요
3. A에 B를 반환
4. A를 실행하고 그 결과를 변수 C에 할당
5. C를 실행

하나의 문으로 다음 다섯 가지 작업을 요약할 수 있습니다.

함수 A 내부의 함수 B와 변수 이름은 함수 A 외부의 변수 C에서 참조됩니다.

약간 수정하면 이 문은 클로저를 다음과 같이 정의합니다.

내부 함수가 외부 함수 외부의 변수에 의해 참조되면 클로저가 형성됩니다.

따라서 위의 5가지 작업을 수행하면 클로저가 정의됩니다.

클로저의 사용

클로저의 용도를 이해하기 전에 JavaScript의 GC(가비지 수집) 메커니즘을 이해해 보겠습니다.

JavaScript에서는 객체가 더 이상 참조되지 않으면 GC에 의해 회수되고, 그렇지 않으면 메모리에 계속 유지됩니다.

위의 예에서 B는 A 내에 정의되어 있으므로 B는 A에 종속되고, 외부 변수 C가 B를 참조하므로 A는 C에서 간접적으로 참조됩니다.

즉, A는 GC에 수집되지 않고 계속해서 메모리에 보관됩니다. 이 추론을 증명하기 위해 위의 예를 약간 개선해 보겠습니다.

function A(){
    var count = 0;
    function B(){
       count ++;
       console.log(count);
    }
    return B;
}
var C = A();
C();// 1
C();// 2
C();// 3

1. var C = A();를 호출하면 A가 실행되어 카운트 변수와 내부 함수 B가 생성됩니다. A가 B를 반환하므로 C 변수는 실제로 B에 대한 참조를 갖습니다. 그런 다음 함수 B는 A의 카운트 변수
2. B는 클로저이므로 함수 B는 A의 count 변수에 액세스할 수 있습니다. 이는 B가 클로저이고 클로저는 생성된 컨텍스트(예: 지역 변수)를 보존하기 때문입니다.
3. C()가 호출되면 실제로는 함수 B를 호출합니다. C()가 호출될 때마다 B는 count 값을 증가시키고 해당 값을 콘솔에 표시합니다.
4. A의 실행 컨텍스트는 B가 생성될 때 종료되지만 B가 해당 지역 변수(예: count)를 참조하는 한 A의 지역 변수는 회수되지 않습니다.
5. B가 더 이상 참조되지 않는 경우에만 A의 count 변수와 기타 지역 변수가 복구됩니다. 이 예에서는 C가 여전히 B를 참조하므로 count 값은 복구되지 않으며 A의 실행 컨텍스트도 복구되지 않습니다.

카운트가 초기화되지 않는 이유는 무엇인가요?

폐쇄 메커니즘:

• 클로저는 count 상태를 유지하고 내부 함수 B에 계속 액세스할 수 있도록 유지합니다. A의 실행 컨텍스트가 종료되더라도 B가 이 상태를 계속 참조하기 때문에 count 상태는 메모리에 남아 있습니다.
• B에 대한 각 호출에서: C()에 대한 각 호출은 실제로 클로저에 저장된 개수를 사용하고 다시 초기화하지 않는 B()에 대한 호출입니다.

따라서 모듈에서 일부 변수를 정의하고 이러한 변수를 메모리에 유지하되 전역 변수를 "오염"시키지 않으려는 경우 클로저를 사용하여 이 모듈을 정의할 수 있습니다.

위 내용은 [JavaScript] 몇 초 안에 클로저 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!