이해하기 쉬운 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를 정의합니다

< A 🎜>(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!