유용한 정보 공유: 몇 분 안에 자바스크립트 클로저를 배울 수 있습니다_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 반환(정확히 말하면 A에서 B에 대한 참조 반환)
• (4) A()를 실행하고 A의 반환 결과를 변수 c에 할당합니다
• (5)c() 실행

이 5단계를 말도 안되는 문장으로 요약하자면:

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

이 넌센스를 재처리하면 폐쇄의 정의가 됩니다.

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

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

그러므로 위의 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의 카운트는 항상 메모리에 유지됩니다.

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

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);

It seems that we can see the shadow of closure in this code, but there is no return value in f. It seems that it does not meet the conditions of closure. Pay attention to this code:

window.jView = obj;
obj is an object defined in f, and a series of methods are defined in this object. Executing window.jView = obj means defining a variable jView in the window global object, and pointing this variable to the obj object, that is, the global variable jView references obj. The function in the obj object refers to the variable viewport in f, so the viewport in f will not be recycled by GC and will be saved in memory, so this writing method satisfies the conditions of closure.

4. Simple summary

This is the simplest understanding of closures. Of course, closures have a deeper understanding, which is much more involved. You need to understand the JS execution context (execution context), active object (call object) and The operating mechanism of scope and scope chain. But as a beginner, you don’t need to understand these for now. After you have a simple understanding, you must use it in actual projects. When you use it more, you will naturally have a deeper understanding of closures!

The above is the entire content of this article, I hope it will be helpful to everyone’s study.