JavaScript의 클로저에 대한 자세한 설명

클로저란 무엇인가요

자바스크립트에서 클로저는 이해하기 어려운 개념입니다. ECMAScript에서 클로저의 정의는 다음과 같습니다. 클로저는 계산되지 않은 변수를 포함하는 함수의 어휘적 표현을 나타냅니다. 즉, 함수는 함수 외부에서 정의된 변수를 사용할 수 있습니다.

이 정의를 읽고 나면 더 혼란스러워지시나요? 걱정하지 말고 분석해 봅시다.

• 클로저는 함수입니다

• 클로저는 외부에 정의된 변수를 사용할 수 있습니다

• A 클로저는 변수가 정의된 범위에 존재합니다.

조금 더 명확해 보이지만, 그 외부에 정의된 변수를 사용한다는 것은 무엇을 의미할까요? 먼저 변수 범위를 살펴보겠습니다.

변수 범위

변수는 전역 변수와 지역 변수로 나눌 수 있습니다. 전역 변수의 범위는 전역이며 전역 변수는 js의 어느 곳에서나 사용할 수 있습니다. 함수 내에서 변수를 선언하려면 var 키워드를 사용하세요. 이때 변수의 범위는 변수가 선언된 함수 내에서만 가능하며, 함수 외부에서는 변수에 접근할 수 없습니다.

var func = function(){
    var a = 'linxin';
    console.log(a);         
    // linxin}func();console.log(a);             
    // Uncaught ReferenceError: a is not defined

범위는 비교적 간단합니다. 클로저와 밀접하게 관련된 변수 수명 주기를 살펴보겠습니다.

변수 수명주기

전역 변수, 수명주기는 영구적입니다. 지역 변수는 변수를 정의하는 함수 호출이 끝나면 가비지 수집 메커니즘에 의해 변수가 재활용되고 파괴됩니다. 함수가 다시 호출되면 새 변수가 재정의됩니다.

var func = function(){
    var a = 'linxin';
    console.log(a);}func();

a는 지역 변수입니다. func가 호출되면 a가 삭제됩니다.

var func = function(){
    var a = 'linxin';
    var func1 = function(){
        a += ' a';
        console.log(a);
    }
    return func1;}var func2 = func();func2();                    
    // linxin afunc2();                    
    // linxin a afunc2();                   
    // linxin a a a

func2를 처음 호출한 후 func의 변수 a가 소멸되지 않고 'linxin a'가 되는 것을 볼 수 있습니다. 이때 func1은 클로저를 형성하므로 a의 수명 주기가 계속됩니다.

이제 종결이 더욱 명확해졌습니다.

• 클로저는 위의 func1 함수와 같은 함수입니다.

• 클로저는 다른 함수에서 정의한 변수를 소멸되지 않도록 사용합니다. . 예를 들어 위의 func1은 변수 a

• 를 호출하고 변수 a가 func의 범위에 존재하는 경우 클로저가 존재해야 합니다. 이 범위에서.

이제 이 세가지 조건을 만족하는 것이 클로저라고 할 수 있습니다.

간단하고 고전적인 예를 통해 클로저에 대해 좀 더 알아봅시다.

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        console.log(i)    
     }, 0)
}

우리는 단순히 콘솔이 0 1 2 3을 인쇄할 것이라고 생각할 수도 있지만 실제로는 4 4 4 4를 인쇄합니다. 왜 그럴까요? setTimeout 함수가 비동기식임을 확인했습니다. 함수가 실행될 때쯤에는 for 루프가 종료되었으므로 이때 i의 값은 4이므로 function() { console.log(i) }는 변수 i를 찾고 4개만 얻을 수 있어요.

이전 예에서 클로저가 a 변수의 값을 저장했다는 것을 기억하므로 여기서도 클로저를 사용하여 0 1 2 3을 저장할 수 있습니다.

for (var i = 0; i < 4; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i)        
        }, 0)   
     })(i)
 }

i=0일 때 익명 함수에 0을 매개변수로 전달합니다. 이때 function(i){} 이 익명 함수에서 i의 값은 다음과 같습니다. 0, setTimeout이 실행될 때까지 기다렸다가 외부 레이어를 따라 i를 찾으면 0을 얻을 수 있습니다. 이 사이클을 반복하면 원하는 0 1 2 3을 얻을 수 있습니다.

메모리 관리

클로저에서 지역 변수를 호출하면 지역 변수가 제때에 소멸되지 않게 됩니다. 이는 전역 변수가 항상 메모리를 점유하는 것과 동일합니다. 이러한 변수가 차지하는 메모리를 회수해야 하는 경우 변수를 수동으로 null로 설정할 수 있습니다.

그러나 클로저를 사용하는 과정에서 JavaScript 객체와 DOM 객체 사이에 순환 참조를 형성하기가 더 쉬워지며 이로 인해 메모리 누수가 발생할 수 있습니다. 이는 브라우저의 가비지 수집 메커니즘에서 두 객체 사이에 순환 참조가 형성되면 재활용할 수 없기 때문입니다.

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    }

위의 예에서는 func 함수의 익명 함수를 사용하여 클로저가 생성됩니다. test 변수는 id가 test인 DOM 객체를 참조하는 JavaScript 객체입니다. DOM 객체의 onclick 속성은 클로저를 참조하며, 클로저는 test를 호출할 수 있으므로 순환 참조가 형성되어 두 객체를 모두 사용할 수 없게 됩니다. 재활용됩니다. 이 문제를 해결하려면 순환 참조의 변수를 null로 설정하면 됩니다.

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    test = null;}

func 함수에서 클로저를 생성하기 위해 익명 함수를 사용하지 않고 외부 함수를 참조하는 경우 순환 참조 문제는 발생하지 않습니다.

위 내용은 JavaScript의 클로저에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!