집 > 기사 > 웹 프론트엔드 > js closure_basic 지식에 대한 자세한 설명

js closure_basic 지식에 대한 자세한 설명

WBOY원래의: 2016-05-16 16:37:571716검색

클로저는 Javascript 언어의 어려움이자 특징입니다. 많은 고급 애플리케이션이 클로저에 의존합니다.

클로저에는 세 가지 특성이 있습니다.

1. 함수 중첩 함수
2. 함수 내부에서 외부 매개변수 및 변수를 참조할 수 있습니다
3. 매개변수와 변수는 가비지 수집 메커니즘에 의해 재활용되지 않습니다
클로저는 다른 함수의 범위에 있는 변수에 액세스할 수 있는 함수입니다. 클로저를 만드는 가장 일반적인 방법은 함수 내에 다른 함수를 만들고 다른 함수를 통해 이 함수의 지역 변수에 액세스하는 것입니다.

클로저 사용에는 장점과 단점이 있습니다. 즉, 지역 변수가 메모리에 상주할 수 있고 전역 변수 사용을 피할 수 있다는 것입니다. 전역 변수는 모든 모듈에서 호출 가능하며 이는 재앙이 될 수 있습니다.

따라서 캡슐화된 비공개 지역 변수를 사용하는 것이 좋습니다.

일반 함수 실행 후 로컬 활성 객체는 소멸되고 전역 범위만 메모리에 저장됩니다. 그러나 폐쇄의 상황은 다릅니다!

중첩된 함수 종료:

  function 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) 두 객체가 서로를 참조하고 더 이상 제3자가 참조하지 않는 경우, 서로를 참조하는 두 객체도 재활용됩니다.

그럼 클로저를 사용하면 어떤 이점이 있나요? 클로저 사용의 이점은 다음과 같습니다.

1. 변수가 메모리에 오랫동안 상주하기를 원함

2. 전역 변수 오염 방지

3. 비공개 회원의 존재
1. 전역변수 축적

2. 지역변수

<script>
var a = 1;
function abc(){
    a++;
    alert(a);
}
abc();       //2
abc();      //3
</script>

<script>

function abc(){
    var a = 1;
    a++;
    alert(a);
}
abc();            //2
abc();          //2
</script>

그렇다면 변수를 지역 변수이자 누적 변수로 만들 수 있는 방법은 무엇일까요?

3. 지역 변수 축적(클로저로 수행할 수 있는 작업)

<script>
function outer(){
    var x=10;
    return function(){       //函数嵌套函数
        x++;
        alert(x);
    }
}
var y = outer();       //外部函数赋给变量y;
y();         //y函数调用一次，结果为11
y();        //y函数调用第二次，结果为12，实现了累加
</script>

js의 함수 선언 및 함수 표현:

js에서는 function 키워드를 통해 함수를 선언할 수 있습니다.

<script>
function abc(){
    alert(123);
}
abc();
</script>

"()"를 통해 이 명령문을 표현식으로 바꿀 수도 있습니다.

<script>
(function (){
    alert(123);
})();          //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；
</script>

4. 전역 변수의 오염을 줄이기 위한 모듈식 코드

<script>
var abc = (function(){   //abc为外部匿名函数的返回值
    var a = 1;
    return function(){
        a++;
        alert(a);
    }
})();
abc();  //2 ；调用一次abc函数，其实是调用里面内部函数的返回值  
abc();  //3
</script>

5. 비공개 회원의 존재

<script>
var aaa = (function(){
    var a = 1;
    function bbb(){
        a++;
        alert(a);
    }
    function ccc(){
        a++;
        alert(a);
    }
    return {
        b:bbb,       //json结构
        c:ccc
    }
})();
aaa.b();   //2
aaa.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" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <title></title>
  <script>
  window.onload = function(){
      var aLi = document.getElementsByTagName('li');
      for (var i=0;i<aLi.length;i++){
          aLi[i].onclick = function(){    //当点击时for循环已经结束
          alert(i);
          };
      }
  }
  </script>

  </head>
  <body>
      <ul>
          <li>123</li>
          <li>456</li>
          <li>789</li>
          <li>010</li>
      </ul>
  </body>
  </html>

7. 클로저를 사용하여 위 코드를 다시 작성하세요.

성명：

이전 기사：IndexOf 및 lastIndexOf 사용 예 Introduction_javascript 기술다음 기사：IndexOf 및 lastIndexOf 사용 예 Introduction_javascript 기술

js closure_basic 지식에 대한 자세한 설명

관련 기사