몇 분 만에 JS 클로저를 배울 수 있습니다

클로저는 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 메커니즘을 이해해 보겠습니다.

In 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();// 1C();// 2C();// 3

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

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에 정의된 객체입니다. jView = obj는 window 전역 객체에 jView 변수를 정의하고 이 변수를 obj 객체를 가리킵니다. 즉, 전역 변수 jView는 obj를 참조하고 obj 객체의 함수는 viewport 변수를 참조합니다. function f이므로 function f에서 뷰포트는 GC에 의해 재활용되지 않으며 뷰포트는 항상 메모리에 저장되므로 이 쓰기 방법은 폐쇄 조건을 충족합니다.

4 간단한 요약

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