JavaScript 클로저

JavaScript 변수는지역스코프 또는전역스코프

다음과 같이 사용할 수 있습니다:클로저전역 변수를 지역(비공개)으로 설정합니다.

왜 클로저가 필요합니까?

어떤 것을 카운트할 변수를 사용하고 모든 함수에서 사용할 수 있는 카운터를 원하는 경우를 생각해 봅시다.

전역 변수와 카운터를 증가시키는 함수를 사용할 수 있습니다:

//　카운터 초기화
var counter = 0;
//　카운터 증가 함수
function increment() {
　　counter++;
}
//　increment() 호출　3번
increment();
increment();
increment();
//　이제 이 카운터는 다음과 같아야 합니다:3
document.getElementById("output").innerHTML = `카운터: ${counter};`;

위의 솔루션에는 문제가 있습니다: 페이지에 있는 모든 코드가 increment() 호출 없이 카운터를 변경할 수 있습니다.

JavaScript 내부 함수는 이 문제를 해결할 수 있습니다.

JavaScript 내부 함수

JavaScript는 내부 함수를 지원합니다. 내부 함수는 상위 스코프에 접근할 수 있습니다.

이 예제에서 내부 함수는 외부 함수 내의 카운터 변수에 접근할 수 있습니다.:

function outer() {
　　var counter = 0;
　　function inner() {
　　　　　　counter++;
　　}
　　return counter;　
}

내부 함수는 이전 문제를 해결할 수 있습니다. 만약 우리가 outer() 함수를 외부에서 호출할 수 있다면.

우리는 counter = 0을 한 번만 실행할 수 있는 방법을 찾아야 합니다. 그것은 다음에 설명할 클로저입니다.

JavaScript 클로저

클로저는 함수와 그 함수를 선언한 문법적 환경의 조합입니다.

클로저는 다른 함수의 스코프에서 변수에 접근할 수 있습니다. 이는 함수 내부에서 함수를 생성함으로써 이루어집니다. 물론, 외부 함수는 내부 스코프에 접근할 수 없습니다.

var increment = (function() {
　　var counter = 0;
　　function inner() {
　　　　　　return　++counter;
　　}
　　return inner;
})();

변수 증가에 자기행위 함수의 반환 값을 할당했습니다.

자기�行위는 한 번만 실행됩니다. 카운터를 0으로 설정하고 함수 표현식을 반환합니다.

클로저는 부모 함수가 닫혀도 부모 스코프에 접근할 수 있는 함수입니다.