클로저는 JavaScript에서 중요한 개념입니다. 특히 ECMA 사양에서 제공하는 정의는 정의부터 이해하기 어렵습니다. 따라서 이 글에서는 클로저의 개념을 길게 설명하지 않고, 몇 분 안에 클로저를 배울 수 있도록 실무적인 정보로 직접 이동하겠습니다!
1. 마무리 - 첫사랑의 경험
새로운 기술을 접하면 가장 먼저 하는 일은 데모 코드를 찾는 것입니다. 코더의 경우 코드가 자연어보다 더 잘 이해할 수 있는 경우가 있습니다. 실제로 클로저는 어디에나 있습니다. 예를 들어 jQuery와 zepto의 주요 코드는 모두 큰 클로저에 포함되어 있습니다. 따라서 아래에서는 여러분의 두뇌에서 클로저를 생성하는 데 도움이 되는 가장 간단하고 원시적인 클로저 데모를 작성하겠습니다. >
function A(){
function B(){
console.log("Hello Closure!");
}
return B;
}
var c = A();
c();//Hello Closure!
이것은 역사상 가장 간단한 클로저입니다. 아무리 간단해도 더 이상 클로저가 아닙니다.
위 코드를 자연어로 번역하면 다음과 같습니다.
함수 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
이것이 클로저의 역할입니다. 때때로 우리는 모듈에서 그러한 변수를 정의해야 합니다. 우리는 이 변수가 메모리에 유지되기를 원하지만 전역 변수를 "오염"시키지 않기를 원합니다. 이 경우 클로저를 사용하여 정의할 수 있습니다. 이 모듈.
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);
이 구성 요소의 기능은 컨테이너를 초기화한 다음 컨테이너에 하위 컨테이너를 추가하거나 컨테이너를 제거하는 것입니다. 함수는 매우 간단하지만 여기에는 함수를 즉시 실행한다는 또 다른 개념이 포함됩니다. 간단하게 이해해 보세요. 가장 중요한 것은 이 작성 방법이 클로저 기능을 구현하는 방법을 이해하는 것입니다.
따라서 이 코드의 실행 과정은 다음과 같이 분해될 수 있습니다.
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.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
