자바스크립트 클로저

클로저는 JavaScript에서 중요한 개념 중 하나입니다. 그것은 널리 논의되고 여전히 혼란스러운 개념입니다. 폐쇄가 무엇인지 이해합시다.

폐쇄는 외부 함수가 반환된 후에도 내부 함수가 항상 외부 함수의 변수 및 매개변수에 액세스할 수 있음을 의미합니다.

JavaScript에서 중첩 함수를 만들 수 있다는 것을 배웠습니다. 내부 함수는 외부 함수의 변수 및 매개변수에 액세스할 수 있습니다(단, 외부 함수의 인수 객체에는 액세스할 수 없음). 다음 예를 고려하십시오.

function OuterFunction() {

    var outerVariable = 1;

    function InnerFunction() {
        alert(outerVariable);
    }

    InnerFunction();
}

위의 예에서 InnerFunction()은 outerVariable에 액세스할 수 있습니다.

이제 위의 정의에 따라 InnerFunction()은 별도로 실행되는 경우에도 outerVariable에 액세스할 수 있습니다. 다음 예를 고려하십시오.

예: 폐쇄

function OuterFunction() {
    var outerVariable = 100;
    function InnerFunction() {
        alert(outerVariable);
    }
    return InnerFunction;
}
var innerFunc = OuterFunction();
innerFunc(); // 100

위의 예에서 InnerFunction을 반환합니다. OuterFunction()을 호출하면 OuterFunction에서 InnerFunction을 반환합니다. 변수 innerFunc는 OuterFunction()이 아닌 InnerFunction()만 참조합니다. 따라서 이제 innerFunc()를 호출하면 OuterFunction()에 선언된 outerVariable에 계속 액세스할 수 있습니다. 이를 클로저라고 합니다.

함수는 JavaScript에서 다른 함수를 반환할 수 있습니다. 변수에 할당된 함수를 함수 표현식이라고 합니다.

클로저의 한 가지 중요한 특징은 외부 변수가 여러 호출 간에 상태를 유지할 수 있다는 것입니다. 내부 함수는 외부 변수의 별도 복사본을 유지하지 않고 외부 변수를 참조하므로 내부 함수를 사용하여 변경하면 외부 변수의 값이 변경됩니다.

예: 폐쇄

function Counter() {
    var counter = 0;
    function IncreaseCounter() {
        return counter += 1;
    };
    return IncreaseCounter;
}
var counter = Counter();
alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

위의 예에서 외부 함수 Counter는 내부 함수 IncreaseCounter()의 참조를 반환합니다. 증가 카운터는 외부 변수 카운터를 1로 증가시킵니다. 따라서 내부 함수를 여러 번 호출하면 카운터가 매번 1로 증가합니다.

클로저는 여러 수준의 내부 함수에서 유효합니다.

예: 폐쇄

function Counter() {

    var counter = 0;
    setTimeout( function () {
        var innerCounter = 0;
        counter += 1;
        alert("counter = " + counter);
        setTimeout( function () {
            counter += 1;
            innerCounter += 1;
            alert("counter = " + counter + ", innerCounter = " + innerCounter)
        }, 500);
    }, 1000);
};
Counter();

클로저 정의에 따라 내부 함수가 외부 함수의 변수에 액세스하는 경우에만 클로저라고 합니다.

다음은 폐쇄가 아닙니다.

var Counter = (function () {
        var i = 0;
        return { counter : i += 1 };
})();

클로저를 언제 사용합니까?

클로저는 JavaScript에서 구현 세부 사항을 숨기는 데 유용합니다. 즉, 프라이빗 변수나 함수를 만드는 것이 유용할 수 있습니다.

다음 예제는 개인 함수 및 변수를 만드는 방법을 보여줍니다.

예: 폐쇄

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();
alert(counter.value()); // 0
counter.increment();
counter.increment();
alert(counter.value()); // 2
counter.decrement();
alert(counter.value()); // 1

행운을 빕니다