이해하기 쉬운 JavaScript 클로저 예제 코드

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

1 클로저 – 첫 사랑의 경험

새로운 기술을 접하면 가장 먼저 하는 일은 데모를 찾는 것입니다. 암호. 코더의 경우 코드가 자연어보다 더 잘 이해할 수 있는 경우가 있습니다. 실제로 클로저는 어디에나 있습니다. 예를 들어 jQuery와 zepto의 주요 코드는 모두 큰 클로저에 포함되어 있습니다. 따라서 아래에서는 여러분의 두뇌에서 클로저를 생성하는 데 도움이 되는 가장 간단하고 원시적인 클로저 데모를 작성하겠습니다. >

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

역사상 가장 간단한 클로저입니다. 아무리 간단해도 더 이상 클로저가 아닙니다.

사전 이해를 마친 후 '거대한 군중' 속에서 '그녀'를 한눈에 알아볼 수 있도록 일반 기능과 어떻게 다른지 간략하게 분석해 보겠습니다.

위 코드는 다음과 같이 자연어로 번역됩니다.

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

(2)는 일반 함수 B를 정의합니다

(3) A에서 B를 반환합니다(정확히 말하면 A에서 B에 대한 참조를 반환합니다)

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

(5) c() 실행

이 5단계 작업을 말도 안되는 문장으로 요약하면 다음과 같습니다.

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

이 넌센스를 재처리하면 클로저의 정의가 됩니다.

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

이 정의를 기억하지 마세요. 이 정의를 말하는 목적은 위의 5단계가 클로저의 정의를 자세히 설명한다는 점을 이해시키기 위한 것입니다.

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

종료입니다.

2 클로저의 역할

클로저의 역할을 이해하기 전에 먼저 자바스크립트의 GC 메커니즘을 이해해 보겠습니다. 자바스크립트에서는 객체가 더 이상 참조되지 않으면 이 객체가 됩니다. 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의 카운트는 항상 메모리에 유지됩니다.

이것이 클로저의 역할입니다. 때로는 모듈에서 이러한 변수를 정의해야 합니다. 이 변수는 항상 메모리에 저장되지만 전역 변수를 "오염"시키지 않기를 바랍니다. 클로저를 사용하여 이 모듈을 정의할 수 있습니다.

3가지 고급 작성 방법

위 작성 방법은 사실 가장 단순하고 원시적인 작성 방법이지만, 실제 애플리케이션에서는 이런 식으로 쓰는 사람이 없습니다. 특히 일부 대규모 JS 프레임워크에서는 더욱 그렇습니다. . 쓰다. 제가 이런 글쓰기 방법을 말씀드리는 이유는 방해 요소가 적을수록 한 가지에 집중하기가 더 쉽기 때문입니다. 아래에서는 일반적으로 사용되는 작성 방법을 사용하여 간단한 데모 구성 요소를 작성합니다.

(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의 실행 환경(실행 컨텍스트), 활성 개체에 대한 이해가 필요합니다. (객체 호출), 범위 및 범위 체인의 작동 메커니즘. 하지만 초보자로서 지금 당장은 이러한 내용을 이해할 필요는 없습니다. 간단한 이해를 한 후에는 실제 프로젝트에서 사용하면 자연스럽게 클로저에 대한 더 깊은 이해를 갖게 됩니다.

위 내용은 이해하기 쉬운 JavaScript 클로저 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!