폐쇄는 JavaScript 언어와 그 기능의 어려움입니다. 많은 고급 응용 프로그램은 구현을 위해 폐쇄에 의존합니다. 나는 오랫동안 폐쇄의 개념에 노출되어 왔지만 혼란 스러웠으며 JavaScript 클로저가 무엇인지, 무엇이 유용한 지 이해할 수 없었습니다. 오늘 저는 인터넷에서 JavaScript Closures (원본 링크)에 관한 기사를 보았습니다. 그것은 매우 잘 설명되었습니다. 이제 나는 JavaScript 클로저가 마법의 것과 폐쇄의 목적이라는 것을 완전히 이해했습니다. 나는 당신과 공유하기 위해 여기에 쓸 것입니다. JavaScript 클로저를 이해하지 못하는 친구들이 읽은 후 폐쇄를 이해할 수 있기를 바랍니다! 다음 내용의 대부분은 원본 텍스트에서 나옵니다. 쉽게 이해하기 위해 몇 가지 코드 주석, 작동 렌더링 및 약간의 수정을 원본 텍스트에 추가했습니다!
1. 변수의 범위
폐쇄를 이해하려면 먼저 JavaScript의 특수 변수 범위를 이해해야합니다.
JavaScript에서 변수의 범위는 글로벌 변수와 로컬 변수의 두 가지 유형으로 나뉩니다.
JavaScript에서는 글로벌 변수를 함수 내에서 직접 읽을 수 있습니다.
var n =; // 글로벌 변수 nfunction f () {alert ( "글로벌 변수 n, n ="+n); // 글로벌 변수 n} f ()에 액세스; //실행 결과 :
그러나 다른 방법은 불가능합니다. 함수 내부의 로컬 변수는 함수 외부에서 읽을 수 없습니다.
함수 f () {var n =; // 로컬 변수 n} 경고를 정의합니다 ( "함수 외부의 로컬 변수 n에 액세스, n ="+n); // 함수 외부의 로컬 변수 n에 액세스, 오류 : n은 정의되지 않습니다.실행 결과 :
여기에 주목할 곳이 있습니다. 내부적으로 변수를 선언 할 때는 var 명령을 사용해야합니다. 그렇지 않다면 실제로는 글로벌 변수입니다!
함수 f () {n =;} f (); alert ( "n은 f1 함수 내부에서 var로 선언되지 않습니다.이 시점에서 n은 전역 변수, /r /n 증명 : n ="+n+", Window.n == n은 다음과 같습니다."+(window.n == n));실행 결과 :
2. 외부에서 로컬 변수를 읽는 방법은 무엇입니까?
여러 가지 이유로, 우리는 때때로 함수 내에서 로컬 변수를 가져와야합니다. 그러나 앞에서 언급했듯이 정상적인 상황에서는이 작업을 수행 할 수 없으며 해결 방법을 통해서만 달성 할 수 있습니다.
그것은 함수 내부의 다른 함수를 정의하는 것입니다.
함수 f () {var n =; // l 로컬 변수 n 내부 f 함수 // f 함수 함수 f () {// f 함수 내부, Alert (n); //}}위의 코드에서 기능 F2는 기능 F1 내부에 포함되며 F1 내의 모든 로컬 변수는 F2로 표시됩니다. 그러나 다른 방법은 불가능합니다. F2 내부의 로컬 변수는 F1에 보이지 않습니다. 이것은 JavaScript 언어에 고유 한 "체인 스코프"구조입니다. 자식 객체는 모든 상위 물체 변수에 대해 레벨별로 위쪽으로 보입니다. 따라서 부모 객체의 모든 변수는 Child Object에 보입니다. 그렇지 않으면 사실이 아닙니다. F2는 F1에서 로컬 변수를 읽을 수 있으므로 F2가 반환 값으로 사용되는 한 F1 외부에서 내부 변수를 읽을 수 없습니까? 어떤 사람들은 질문이있을 수 있습니다. F2는 함수입니다. F1 함수의 반환 값으로 어떻게 반환 할 수 있습니까? 사실, 괜찮습니다. JavaScript 자체의 함수 이름은 변수이므로 함수는 일반 변수로도 사용할 수 있습니다. 즉, 하나의 함수가 매개 변수를 전달하는 것과 같은 다른 함수로 전달 될 수있을뿐만 아니라 한 함수를 다른 함수의 리턴 값으로 반환 할 수도 있습니다.
함수 f () {var n =; // 로컬 변수 n // f 함수 f 함수 f () {alert (n); } return f; // f 함수를 f 함수의 리턴 값으로 사용합니다} var result = f (); // f가 f 함수라고 호출 한 후 반환 값은 f 함수 result (); // 999, F2 기능을 호출하십시오실행 결과 :
3. 폐쇄의 개념
코드의 이전 섹션의 F2 함수는 폐쇄입니다. 다양한 전문 문서에서 "클로저"의 정의는 매우 추상적입니다. 예를 들어, 폐쇄 정의가 있습니다. "JavaScript 클로저는 다른 범위의 이전 레벨 함수 또는 범위에서 얻는 변수이며, 이전 레벨 함수의 실행이 완료되면 이러한 변수는 파괴되지 않습니다." 그러한 폐쇄 정의를 이해하기는 어렵습니다. 내 이해는 폐쇄가 다른 기능 내에서 변수를 읽을 수있는 함수라는 것입니다. JavaScript 언어에서는 내부 기능만이 로컬 변수를 읽을 수 있으므로 폐쇄는 단순히 "함수 내부에서 정의 된 함수"로 이해할 수 있습니다. 따라서 본질적으로 폐쇄는 기능의 내부와 외부를 연결하는 다리입니다.
4. 폐쇄의 목적
클로저는 여러 곳에서 사용할 수 있습니다. 두 가지 가장 큰 용도가 있으며, 하나는 기능 내부의 변수를 위에서 언급했듯이 읽을 수 있고, 다른 하나는 이러한 변수의 값이 항상 메모리에 유지된다는 것입니다.
이 문장을 이해하는 방법? 아래 코드를 참조하십시오.
함수 f () {var n =; // nadd는 var를 사용하여 선언되지 않은 글로벌 변수입니다. 이 변수는 이제 f 함수 nadd = function () {n+=} 함수 f () {alert (n); } 반환 f; } var result = f (); // result는 f 함수 result (); // 결과 함수에 대한 첫 번째 호출 nadd (); // nadd는 f 함수 내부에서 선언 된 익명 함수를 나타냅니다. nadd ()는 익명 함수 결과 (); // 결과 함수 1000에 대한 두 번째 호출입니다.실행 결과 :
이 코드에서 결과는 실제로 Closure F2 함수입니다. 총 2 회, 첫 번째 값은 999이고 두 번째 값은 1000입니다. 이는 기능 F1의 로컬 변수 N이 메모리에 유지되었으며 F1이 호출 된 후에 자동으로 지우지 않았 음을 증명합니다.
왜 이런 일이 일어나고 있습니까? 그 이유는 F1이 F2의 상위 함수이고 F2가 글로벌 변수에 할당되어 F2가 항상 메모리에 있고 F2의 존재는 F1에 의존하기 때문입니다. 따라서 F1은 항상 메모리에 있으며 통화가 완료된 후에는 쓰레기 수집 메커니즘에 의해 재활용되지 않습니다.
이 코드의 또 다른 주목할만한 점은 "nadd = function () {n+= 1}"라인이 NADD 전에 처음 사용되므로 NADD는 로컬 변수가 아닌 글로벌 변수라는 것입니다. 둘째, NADD의 값은 익명의 함수 이며이 익명 함수 자체는 폐쇄이므로 NADD는 설정자와 동일하며 기능 외의 함수 내부의 로컬 변수에서 작동 할 수 있습니다.
5. 클로저 사용에 대한 메모
1) 폐쇄로 인해 함수의 모든 변수가 메모리에 저장되므로 메모리 소비가 매우 크고 클로즈는 남용 될 수 없으며, 그렇지 않으면 웹 페이지의 성능 문제가 발생하여 IE의 메모리 누출로 이어질 수 있습니다. 해결책은 함수를 종료하기 전에 사용되지 않은 모든 로컬 변수를 삭제하는 것입니다.
2) 폐쇄는 부모 함수 외부의 부모 함수 내부의 변수 값을 변경합니다. 따라서 부모 함수를 객체로 사용하는 경우 폐쇄를 공개 방법으로 사용하고 내부 변수를 사유 재산으로 사용하는 경우 부모 기능의 내부 변수의 값을 마음대로 변경하지 않도록주의하십시오.
6. 생각 질문
다음 두 코드의 실행 결과를 이해할 수 있다면 폐쇄의 실행 메커니즘을 이해하는 것으로 간주해야합니다.
코드 스 니펫 1 :
var name = "창"; var object = {name : "my 객체", getNameFunc : function () {return function () {return this.name; }; }}; ALERT (Object.GetNameFunc () () ());실행 결과 :
코드 스 니펫 2 :
var name = "창"; var object = {이름 : "내 개체", getNameFunc : function () {var that = this; return function () {return that.name; }; }}; ALERT (Object.GetNameFunc () () ());실행 결과 :
위의 두 코드 스 니펫의 실행 결과를 분석하기 위해 다음 주석이 코드에 추가됩니다.
코드 스 니펫 1 :
분석은 다음과 같습니다.
/*JavaScript에서는 JavaScript 글로벌 객체, 글로벌 기능 및 전역 변수가 자동으로 Window 객체의 구성원이됩니다. 글로벌 변수는 창 객체의 속성입니다. 글로벌 기능은 창 객체의 방법입니다. */var name = "the st 시간 전역 변수 객체 객체가 자동으로 창 객체 var var 객체의 속성이됩니다. var 객체 = {name : "my 객체", // 객체의 이름 getNameFunc : function () {// getNameFunc 함수 // 객체 객체의 getNameFunc 메소드의 리턴 값은 객체에 대한 객체에 대한 객체에 대한 객체에 대한 객체에 대한 객체에 대한 반환 어떤 객체에. // 익명 함수에서 이것이 대상 대신 창 객체를 나타내는 것을 증명합니다 ( "this == 객체 결과는 다음과 같습니다."+(this == 객체)); ALERT ( "이 == 창 결과는 다음과 같습니다."+(this == Window)); 이름을 반환합니다. // 이것은 창 객체를 나타내므로 this.name은 자연스럽게 창 객체 "Window"}의 이름에 액세스합니다. }}; // 증명 : 전역 객체 객체는 창 객체 알림의 속성입니다 ( "window.object :"+wind 현재 Retfn은 익명 방법을 나타냅니다. 이제 익명 메소드에 이름 retfn을 제공하는 것과 같습니다. 이때 retfn 함수는 자동으로 창 객체의 함수가됩니다*/var retfn = object.getNamefunc (); alert (retfn ()); // 반환 된 익명 메소드를 호출하면 누가이 익명 메소드를 호출합니까? Window Object // 증명 : Retfn 함수는 Window Object Alert ( "Window.retfn () :"+Window.retfn ())의 함수입니다. // Window.retfn () (Object Name. Method Name) 형태로 Retfn 메소드를 호출 할 수 있습니다. 그러면 Retfn 함수가 Window 객체의 함수임을 증명합니다.코드 스 니펫 2 :
분석은 다음과 같습니다.
var name = "The Window"; // global variable name // global object 객체 대상 객체 = {name : "my object", getNamefunc : function () {/*이 시점에서 어떤 개체를 나타내나요? 이것은 객체 객체를 나타냅니다. 어떤 객체 가이 기능을 위치시키는 기능을 호출합니까? 이것은 어떤 객체가 실행되었는지, 그리고 이는 객체 객체*/var를 나타냅니다. ALERT ( "this == Window result :"+(this == Wind return function () {/*getNameFunc 함수에서 선언 된 로컬 변수입니다. 정상적인 상황에서, getNameFunc 함수 호출이 완료된 후, JavaScript의 GC에 의해 재활용되는 로컬 변수는 로컬 변수가 차지하는 메모리 공간을 확보하지만 이제 정상적으로 사용할 수 있고 재활용되지 않았습니다. 그 이유는 getNameFunc이 익명 함수의 부모 함수이기 때문입니다. getNameFunc 함수가 호출되면 익명 함수가 반환되어 글로벌 변수 retfn에 할당되며 익명 함수가 항상 메모리에있게되며 익명 함수의 존재는 getNameFunc 함수에 따라 다릅니다. 따라서 GetNameFunc 기능은 항상 메모리에 있으며 통화가 완료된 후에는 쓰레기 수집 메커니즘에 의해 재활용되지 않습니다. getNameFunc 함수는 항상 메모리에 있으므로 GetNameFunc 기능 내부에서 로컬 변수가 항상 메모리에 존재합니다. 그것이 존재하기 때문에 물론 계속 사용될 수 있습니다. */reture that.name; // 객체 객체를 나타내는 // 객체 객체 이름 "my Object"}}}; }}; var retfn = object.getNameFunc (); // getNameFunc 메소드를 호출 한 후 익명 메소드가 반환됩니다. 이 시점에서 Retfn은 익명 메소드를 나타내며, 이제 익명 메소드를 제공하는 것과 동일합니다. 이름은 retfn alert (retfn ())입니다.마지막으로, 나는 또한 전에 JavaScript 클로저를 배웠을 때 쓴 예를 첨부했습니다.
<script type = "text/javaScript"> function a () {var i =; // 내부 변수 i 내부 변수를 선언합니다 bfunction bftunction b () {alert ( "i ="+(++ i)); // 함수 내에서 선언 된 내부에서 선언 된 INCENCE a} reture var c의 주소를 반환합니다. 함수를 가리 킵니다. b. 비. 변수 i가 사용됩니다. C ()를 실행 한 후에는 I의 값 (처음)을 표시하기 위해 창이 팝업 되며이 코드는 실제로 함수 A의 변수 C가 함수 a 내부의 함수 B를 나타 내기 때문에 실제로 폐쇄를 만듭니다. 즉, 함수 A의 내부 함수 B가 변수 외부 기능 A에 의해 참조되면 소위 "클로저"클로저가 생성됩니다. A가 실행되고 반환 된 후, 폐쇄는 JavaScript 쓰레기 수집 메커니즘 GC가 A가 차지하는 자원을 재활용하지 않습니다. A */a ()에서 변수에 의존해야 할 필요성의 내부 기능 B의 실행이 확실히 메모리에 공간이있을 것이기 때문입니다. A ()가 실행 된 후 GC는 i var c = a ()에 할당 된 메모리 공간을 재활용 할 것입니다. //이 사용법, GC는 i를 쓰레기 및 c ()로 취급하지 않습니다. // b ()와 동일하지 않습니다. 결과는 다음과 같습니다. i = c (); 결과는 다음과 같습니다. i = c (); // 결과는 다음과 같습니다. i = c (); i = </script : i = </script입니다.실행 결과 :
위의 내용은 편집자가 소개 한 JavaScript Knowledge Points (16)의 JavaScript Closure (Closure) 코드에 대한 자세한 설명입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!