Javascript 클로저에 대한 자세한 설명 및 예제 코드

Javascript 클로저

클로저는 Javascript에서 중요한 개념이며, 특히 ECMA 사양에서 제공하는 정의는 초보자에게 이해하기 어렵습니다. 정의부터요. 따라서 이 글에서는 클로저의 개념을 길게 설명하지 않고, 몇 분 안에 클로저를 배울 수 있도록 실무적인 정보로 직접 이동하겠습니다!

1개 클로저 개요

새로운 기술을 접하면 가장 먼저 하는 일은 데모 코드를 찾는 것입니다. 우리에게는 코드를 보는 것이 자연어보다 사물의 본질을 더 잘 이해할 수 있습니다. 실제로 클로저는 어디에나 있습니다. 예를 들어 jQuery와 zepto의 핵심 코드는 모두 큰 클로저에 포함되어 있으므로 가장 간단하고 원시적인 클로저를 먼저 작성하여 여러분의 두뇌에 클로저를 생성할 것입니다.

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

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

사전 이해를 마친 후, 위의 코드를 자연어로 번역하면 다음과 같이 간략하게 분석해 보겠습니다.

(1) 일반 함수 A를 정의합니다

(2) A에 일반 함수 B

를 정의합니다. (3) A에 B

를 반환합니다. (4) A를 실행하고, A의 반환 결과를 변수 C에 할당합니다.

(5) C 실행

이 5단계를 한 문장으로 요약하면 다음과 같습니다.

함수 A의 내부 함수 B는 함수 A 외부의 변수 c에 의해 참조됩니다.

이 문장을 재처리하면 클로저의 정의가 됩니다.

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

위의 5단계를 수행하면 이미 클로저가 정의된 것입니다!

종료입니다.

2 클로저의 목적

클로저의 역할을 이해하기 전에 먼저 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

count는 함수 A의 변수이고 해당 값은 함수 B에서 변경됩니다. , 함수 B가 실행될 때마다 count의 값은 원래 값을 기준으로 1씩 증가합니다. 따라서 함수 A의 count 변수는 항상 메모리에 저장됩니다.

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

3가지 고급 작성 방법

위 작성 방법은 사실 가장 원시적인 작성 방법이지만, 실제 응용에서는 클로저와 익명함수를 함께 사용하게 됩니다. 다음은 클로저를 작성하는 데 일반적으로 사용되는 방법입니다.

(function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
})(document);

이 구성 요소의 기능은 컨테이너를 초기화한 다음 하위 컨테이너를 추가하는 것입니다. 용기에 담는 것도 가능합니다. 용기를 꺼낼 수도 있습니다.

함수는 매우 간단하지만 함수를 즉시 실행한다는 또 다른 개념이 포함됩니다. 간략한 이해만으로 충분합니다. 이해해야 할 것은 이 작성 방법이 클로저 기능을 구현하는 방법입니다.

위 코드는 (function(){})과 () 두 부분으로 나눌 수 있는데, 첫 번째 ()는 표현식이고 표현식 자체는 익명 함수이므로 뒤에 ()를 추가하면 이 표현은 이 익명 함수를 실행한다는 의미입니다.

그래서 이 코드의 실행 과정을 다음과 같이 나누어 볼 수 있습니다.

var f = function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
};
f(document);

마감의 그림자가 보이는 것 같습니다. 이 코드에는 있지만 f에는 반환 값이 없으며 종료 조건을 충족하지 않는 것 같습니다.

window.jView = obj;

obj는 함수 f에 정의되어 있습니다. 일련의 메소드를 정의하는 객체입니다. window.jView = obj를 실행하면 윈도우 전역 객체에 jView라는 변수가 정의되고 이 변수가 obj 객체를 가리킵니다. 즉, 전역 변수 jView는 obj를 참조합니다. 그리고 obj 객체에서 함수는 함수 f의 변수 viewport도 참조하므로 함수 f의 뷰포트는 GC에 의해 재활용되지 않으며 뷰포트는 항상 메모리에 저장되므로 이 쓰기 방법은 폐쇄 조건을 충족합니다.

4 간단한 요약

이는 클로저에 대한 가장 간단한 이해입니다. 물론 클로저에는 JS 실행 컨텍스트와 활성화 개체에 대한 이해가 더 필요합니다. 범위 및 범위 체인의 작동 메커니즘. 하지만 초보자로서 지금 당장은 이러한 내용을 이해할 필요는 없습니다. 간단한 이해를 한 후에는 실제 프로젝트에서 활용해 보면 자연스럽게 클로저에 대한 더 깊은 이해를 갖게 될 것입니다.