>웹 프론트엔드 >JS 튜토리얼 >폐쇄란 무엇인가

폐쇄란 무엇인가

一个新手
一个新手원래의
2017-09-08 13:12:501588검색

클로저란 무엇인가요?

클로저는 다른 함수 범위에 있는 변수에 접근할 수 있는 함수입니다.
– 《javascript 고급 프로그래밍》

在这个函数fun2中可以访问另一个函数中的变量a,所以fun2()就是一个闭包。
function fun1 () { 
      var  a = 0; 
      function fun2 () {  
          console.log(a);  
      } 
      fun2(); }

 1. 정의된 함수 외부에서 클로저 메소드 호출, 이스케이프 메소드:

   (1) 내부 함수를 전역 변수에 할당;

var globalVar; function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      } 
      globalVar = inner;       
      } outer(); // outer 
      globalVar(); // inner;

에 예를 들어, inner()는 전역 변수의 참조를 통해 성공적으로 이스케이프되었습니다. 이제 전역적으로 호출할 수 있으며 외부()

   (2) 값을 반환하여 내부 함수의 참조를 '구출'할 수 있습니다.

function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      }    
      return inner;       
      } 
      var fn = outer(); // outer 
      fn(); // inner;

이 예에서 inner()는 값을 반환하여 성공적으로 이스케이프됩니다. 이제 전역적으로 호출할 수 있으며 external()의 변수를 참조할 수 있습니다

 2. 함수 외부에서 클로저를 호출할 때의 영향: 증가했습니다. 메모리 사용량;

 정상입니다. 함수 호출이 끝난 후 함수의 실행 환경이 환경 스택을 떠나고 정의된 변수가 삭제되고(폐기는 가비지 수집 메커니즘과 관련됨) 활성 변수(변수) 객체)가 파괴되고 메모리가 해제됩니다. 그러나 이제 클로저의 범위 체인에는 외부 함수의 변수 개체가 포함되어 있으므로 외부 함수의 변수를 다시 참조할 수 있습니다. 가비지 수집 메커니즘은 외부 함수의 변수와 외부 함수의 변수 개체를 삭제하지 않습니다. 기능은 메모리에 유지됩니다. 이로 인해 메모리 사용량이 늘어납니다.

  3. 클로저와 변수의 관계: 클로저에 대한 흔한 오해와 해결 방법

  클로저는 함수가 포함된 변수 객체 전체를 저장하고, 얻어지는 외부 객체 변수는 일반적으로 클로저 호출 시점의 객체 변수입니다. 이는 외부 함수 변수의 마지막 값입니다.

예:

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function() { 
              return i; 
          }; 
      } 
      return result; } var result = createFun(); console.log(result5); // 10

 여기서 외부 함수의 반환 값은 배열이고, 배열 값은 다른 함수(클로저)에 대한 참조입니다. 우리는 각 클로저 호출의 반환 값이 다르다고 잘못 생각하게 됩니다. 그러나 실제로 각 각 함수는 동일한 값을 반환합니다. 왜냐하면 클로저가 호출되면 클로저를 호출한 외부 함수가 실행되었기 때문입니다. 이때 외부 함수의 변수 객체는 i = 10이고 우리 클로저의 반환 값은 i이므로 클로저는 외부 함수를 획득하게 됩니다. 호출 당시의 변수 개체, 이때 i는 10입니다.

해결책:

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function(num) { 
              return function() { 
                     return num; 
              }; 
           }(i); 
      } 
      return result; } var result = createFun(); console.log(result5); // 5

루프에서 익명 배열을 정의하고 익명 함수를 즉시 실행한 결과를 배열에 할당합니다. 여기서 익명 함수는 매개변수 num을 가지며, 매번 i가 매개변수로 전달됩니다. num, num을 반복할 때마다 다른 값을 얻게 되므로 매번 다른 함수가 반환됩니다(차이점은 num 값이 다르다는 것입니다). 배열 값을 외부에서 호출하면 다른 값이 반환됩니다. , 예상대로.

  4. 클로저의 this 값에 주목하세요

  우선 함수의 this 지점에 관해 this가 함수를 호출하는 개체를 가리킨다는 점을 알아야 합니다. 창 개체를 가리킵니다.

  클로저의 이 지점은 쉽게 오해할 수 있습니다. 예:

var name = “window”; 
      var o = { 
          name: “object”, 
          getName: function() { 
              return function() { 
                  return this.name; 
              }; 
          } 
      }; console.log(o.getName()()); // window

이 클로저가 전역 객체를 가리키는 것을 볼 수 있습니다. 분석하면 o.getName()()을 (o.getName으로 쓸 수 있습니다. ()) (), 이 표현식은 첫 번째 단계에서 o.getName()을 실행하는 것과 동일합니다. 이 함수는 익명 함수(클로저)를 반환한 다음 해당 클로저를 전역적으로 실행합니다. 전역 개체를 가리킵니다.

 5. 메모리 누수의 문제, 불필요한 메모리 사용량을 줄이는 방법

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          ele.onclick = function() { 
              console.log(ele.id); 
          }; 
          }

 위의 예에서 ele를 정의하는 방법은 익명 함수와 관련되어 있으므로 ele은 익명 함수에 대한 참조를 저장하고, 클로저는 이를 참조합니다. 포함하는 함수도 ele 객체를 참조하므로 객체에 대한 순환 참조가 발생합니다. ele 요소(DOM 요소는 많은 양의 메모리를 차지함)는 항상 메모리에 저장되며 해제될 수 없습니다. 해결책은 다음과 같습니다:

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          var id = ele.id; 
          ele.onclick = function() { 
              console.log(id);    // 通过id值中介表面上解除了与ele的循环引用 
          }; 
          ele = null; // 手动解除引用 }

위 내용은 폐쇄란 무엇인가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.