폐쇄는 JavaScript 언어와 그 기능의 어려움입니다. 많은 고급 응용 프로그램은 구현을 위해 폐쇄에 의존합니다.
클로저에는 세 가지 특성이 있습니다.
1. 기능 중첩 함수
2. 함수는 내부의 외부 매개 변수와 변수를 참조 할 수 있습니다.
3. 가비지 수집 메커니즘에 의해 매개 변수와 변수가 수집되지 않습니다.
클로저는 다른 함수의 범위에서 변수에 액세스 할 수있는 함수를 나타냅니다. 클로저를 생성하는 가장 일반적인 방법은 한 기능 내에서 다른 함수를 만들고 다른 함수를 통해이 함수의 로컬 변수에 액세스하는 것입니다.
클로저 사용의 장점이 있으며, 또한 이에 대한 단점이므로 메모리의 로컬 변수를 상상하고 전역 변수의 사용을 피할 수 있습니다. 글로벌 변수는 모든 모듈에서 호출 가능하며, 이는 치명적입니다.
따라서 개인, 캡슐화 된 로컬 변수를 사용하는 것이 좋습니다.
일반적인 기능이 실행 된 후 로컬 활성 객체가 파괴되고 전역 범위 만 메모리에 저장됩니다. 그러나 폐쇄 상황은 다릅니다!
중첩 된 기능의 폐쇄 :
함수 aaa () {var a = 1; return function () {alert (a ++)}; } var fun = aaa (); fun (); // 1 실행 후 A ++ 후 A는 여전히 ~ fun (); // 2 fun = null; // a가 재활용됩니다! !위의 출력 결과는 5입니다.
클로저는 항상 메모리에 변수를 유지하고 부적절하게 사용하면 메모리 소비를 증가시킵니다.
JavaScript의 쓰레기 수집 원리
(1) JavaScript에서 객체를 더 이상 참조하지 않으면 GC에 의해 개체가 재활용됩니다.
(2) 두 물체가 서로를 참조하고 더 이상 세 번째 사람이 참조하지 않으면이 두 개체는 서로를 참조합니다.
그렇다면 클로저 사용의 이점은 무엇입니까? 클로저 사용의 이점은 다음과 같습니다.
1. 변수가 오랫동안 메모리에 주둔하기를 바랍니다.
2. 글로벌 변수의 오염을 피하십시오
3. 개인 회원의 존재
1. 글로벌 변수의 축적
<cript> var a = 1; function abc () {a ++; 경고 (a);} abc (); // 2ABC (); // 3 </script>2. 로컬 변수
<cript> 함수 abc () {var a = 1; A ++; 경고 (a);} abc (); // 2ABC (); // 2 </script>그렇다면 국부 변수와 축적 될 수있는 변수는 어떻게 달성 될 수 있습니까?
3. 로컬 변수의 축적 (폐쇄가 할 수 있음)
<cript> 함수 OUTER () {var x = 10; return function () {// 함수 중첩 함수 x ++; 경고 (x); }} var y = 외부 (); // 외부 함수는 변수 y; y ()에 할당됩니다. // y 함수는 한 번 호출되며 결과는 11y ()입니다. // y 함수는 두 번째로, 결과는 12이며 축적을 실현합니다 </script>JS의 함수 선언 및 기능 표현 :
JS에서는 키워드 함수를 통해 기능을 선언 할 수 있습니다.
<cript> 함수 abc () {alert (123);} abc (); </script>우리는 또한 "()를 사용 하여이 선언을 표현으로 바꿀 수 있습니다.
<cript> (function () {alert (123);}) (); // 그런 다음 ()을 통해 이전 표현식을 직접 호출하므로 함수가 이름을 쓸 필요가 없습니다. </script>4. 글로벌 변수의 오염을 줄이기위한 모듈 식 코드
<cript> var abc = (function () {// abc는 외부 익명 함수 var a = 1; return function () {a ++; alert (a);}}) (); abc (); // 2; ABC 함수를 한 번 호출하는 것은 실제로 내부 함수 ABC ()의 반환 값을 호출합니다. // 3 </script>5. 개인 회원의 존재
<cript> var aaa = (function () {var a = 1; 함수 bbb () {a ++; alert (a);} 함수 ccc () {a ++; alert (a);} return {b : bbb, // json 구조 c : ccc}}) (); aaa.b (); //2aaa.c () // 3 </script>6. 루프에서 해당 요소의 인덱스를 직접 찾으십시오.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml : lang ="en "> <head> <meta http-equiv ="content-type "content ="text/html; charset = utf-8 "/> <title> </title> <script> window.on loadm.on var eli = {). document.getElementsByTagName ( 'li'); for (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {// 클릭하면 for 루프가 알림 (i); }; }} </script> </head> <hod> <ul> <li> <li> 123 </li> <li> 456 </li> <li> 789 </li> <li> 010 </li> </ul> </body> </html>7. 위의 코드를 다시 작성하려면 폐쇄를 사용하십시오.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml : lang ="en "> <head> <meta http-equiv ="content-type "content ="text/html; charset = utf-8 "/> <title> </title> <script> window.on loadm.on var eli = {). document.getElementsByTagName ( 'li'); for (var i = 0; i <ali.length; i ++) {(function (i) {ali [i] .onclick = function () {alert (i);};}) (i); }}; </script> </head> <hod> <ul> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> </html>