자바스크립트 클로저 심층 이해

JavaScript에서 클로저는 무엇입니까?



클로저라고 하는 어휘 범위와 함께 함수인 어휘 환경과 함께 번들로 제공되는 함수입니다.

따라서 몇 가지 예를 통해 클로저 및 어휘 범위를 이해해 봅시다.

예-1:

var y=2;
function sum(){
    var x=1;
    return x+y;
}
var z=sum();
console.log(z);





JavaScript에서 함수 외부에서 정의된 변수는 함수 내부에서 액세스할 수 있습니다. 이는 JavaScript에서 Lexical Scoping이라고 하는 것이 외부에서 정의된 모든 것은 함수 내부에서 액세스할 수 있지만 내부 변수는 함수 외부에서 액세스할 수 없음을 의미하기 때문에 가능합니다.

예 2:

function x(){
    var a=7;
    function y(){
        console.log(a);
    }
   y();
}
x();




함수 y는 클로저를 형성하고 부모의 어휘 범위에 액세스할 수 있음을 의미하는 x의 변수에 바인딩되었습니다.

예 3:

function x(){
    var a=7;
    function y(){
        console.log(a);
    }
   return y;
}
var z=x();
console.log(z);



이것은 전체 함수 y를 반환하고 콘솔에 인쇄합니다.



예 4:

function x()
{
    var a=7;
    function y()
    {
        console.log(a);
    }
    a=100;
   return y;
}
var z=x();
console.log(z);
z();



해당 값에 대한 참조와 함께 함수는 값뿐만 아니라 전달됩니다.

따라서 "a"의 값을 변경하면 변경됩니다. coz 참조가 함수를 통해 전달되고 있습니다.
우리가 그 함수를 호출할 때와 관계없이 어휘 범위를 유지하고 값을 인쇄합니다.



예 4:
상위 함수의 상위 함수에서 어휘 범위를 이해하기 위해 위의 예를 확장합니다.

function z()
{
    var b=500;
    function x(){
        var a=7;
        function y(){
            console.log(a,b);
        }
        a=100;
         y();
    }
    x();
}
z();




함수 z는 그것의 어휘적 부모 범위 변수를 유지하는 곳 어디에서나 호출할 수 있고 어디에서나 호출할 수 있으며, 그것은 그것의 부모 변수의 값을 유지할 것입니다.

질문이 있으시면 의견을 남겨 주시면 최선을 다해 답변하겠습니다.
이 기사가 도움이 되었으면 좋아요를 누르고 이와 같은 기사를 더 보려면 저를 팔로우하세요.

좋은 웹페이지 즐겨찾기