자 바스 크 립 트 의 폐쇄 에 대한 이 해 를 설명 합 니 다.

1. JS 에서 변수의 역할 영역

패 킷 을 이해 하기 전에 JS 에서 변수의 역할 영역 원 리 를 알 아야 합 니 다. 이 는 전체 역할 영역 과 부분 역할 영역 으로 나 뉘 는데 한 가지 특징 은 부분 적 으로 전체적인 성명 변 수 를 얻 을 수 있 지만 전체 적 으로 부분 적 인 성명 변 수 를 얻 지 못 하 는 것 입 니 다. 우 리 는 먼저 작은 예 를 살 펴 보 겠 습 니 다.

        var num = 99;
        function foo(){
            var hit = 88;
            console.log(num);
        }
        foo();   //99
        console.log(hit);  //  ，   hit  

물론 부분 적 으로 변 수 를 설명 할 때 는 반드시 var 또는 let 를 사용 해 야 합 니 다. 그렇지 않 으 면 전체 국면 에서 변 수 를 생 성하 여 전체 적 으로 오염 되 기 쉽 습 니 다. 위의 코드 는 hit 에 var 성명 이 없 으 면:

        var num = 99;
        function foo(){
            hit = 88;
            console.log(num);
        }
        foo();   //99
        console.log(hit);  //88

2. 폐쇄 란 무엇 인가
그러면 지금 문제 가 생 겼 습 니 다. 만약 에 우리 가 외부 에서 국부 변수 중의 성명 변 수 를 읽 어야 한다 면 일반적인 방식 이 안 됩 니 다. 우 리 는 함수 내부 에 함 수 를 하나 더 끼 워 넣 은 다음 에 이 끼 워 넣 은 함 수 를 되 돌려 줄 수 있 습 니 다.

        function foo(){
            var hit = 88;
            return function num(){
                console.log(hit)
            }
        }
        var num1 = foo();
        num1();  //88

이렇게 하면 콘 솔 에서 hit 변수의 값 을 출력 할 수 있 습 니 다. 사실은 위의 코드 에서 되 돌아 오 는 함수 num () 은 패 킷 이 생 겼 습 니 다. js 에서 함수 내부 의 하위 함수 만 부분 변 수 를 읽 을 수 있 기 때문에 패 킷 을 하나의 함수 내부 에 정의 하 는 함수 로 이해 할 수 있 습 니 다. 쉽게 말 하면...JavaScript 는 내부 함 수 를 사용 할 수 있 습 니 다. 즉, 함수 정의 와 함수 표현 식 은 다른 함수 의 함수 안에 있 습 니 다.그리고 이 내부 함수 들 은 외부 함수 에서 설명 한 모든 부분 변수, 파라미터 와 성명 의 다른 내부 함수 에 접근 할 수 있 습 니 다.이러한 내부 함수 중 하나 가 외부 함 수 를 포함 하 는 것 외 에 호출 되면 패 킷 이 됩 니 다.
3. 폐쇄 적 인 용도

여러분 들 이 폐쇄 적 인 개념 에 대해 간단 한 인식 을 가지 고 있다 고 믿 습 니 다. 우 리 는 이어서 폐쇄 적 인 표현 형식 과 용 도 를 연구 합 니 다.(1) 익명 자동 실행 함수

        (function(){
          var foo = function(){
             console.log('        ')
          };
          foo();
        })();

위의 코드 도 패 킷 을 닫 는 응용 으로 함수 에 사용 하면 한 번 만 실행 되 는 장면 이 고 실행 이 끝나 면 방출 됩 니 다.(2) 대상 에 게 개인 변 수 를 설정 합 니 다.

        var result = function(){
            var count = 1;
              
            return function (){
                count++;
                console.log(count)
              }
        }()

        result(); //2
        result(); //3
        result(); //4
        result(); //5

위의 코드 는 코드 간 의 충돌 을 방지 하기 위해 자신의 개인 변 수 를 저장 할 수 있다.(3) 비동기 실행 함수 아래 작은 예 를 보 겠 습 니 다.

    for(var i=0;i<5;i++){
                console.log(i);  //0，1，2，3，4
    }
    for(var i=0;i<5;i++){
            setTimeout(()=>{
                console.log(i); //5，5，5，5，5
        }，0)
    }

왜 이런 차이 가 발생 할 수 있 습 니까? setTimeout 은 비동기 로드 이기 때문에 순환 이 끝 난 후에 마지막 결 과 를 출력 하기 위해 서 입 니 다. 만약 에 우리 가 출력 0, 1, 2, 3, 4 를 실현 하고 싶다 면?그럼 폐쇄 적 으로 사용 해 야 겠 네요.

    for(var i=0;i<5;i++){

        (function(i){
            setTimeout(()=>{
                console.log(i); //0，1，2，3，4
            },0);
        })(i);
    }

위 는 비동기 호출 패키지 입 니 다. 외부 실행 환경 이 끝 났 더 라 도 변수 값 을 메모리 에 저장 할 수 있 습 니 다.
4. 폐쇄 적 인 장단 점
(1) 패 킷 을 닫 으 면 함수 의 변 수 를 메모리 에 저장 하고 메모리 소모 가 많 기 때문에 패 킷 을 남용 해 서 는 안 됩 니 다. 그렇지 않 으 면 웹 페이지 의 성능 에 문제 가 생 겨 IE 에서 메모리 가 유출 될 수 있 습 니 다.해결 방법 은 함 수 를 종료 하기 전에 사용 하지 않 는 부분 변 수 를 모두 삭제 하 는 것 입 니 다.
(2) 패 킷 을 닫 으 면 부모 함수 외부 에서 부모 함수 내부 변수의 값 을 변경 합 니 다.따라서 부모 함 수 를 대상 (object) 으로 사용 하면 패 키 지 를 닫 는 것 을 공용 방법 (Public Method) 으로 생각 하고 내부 변 수 를 개인 속성 (private value) 으로 생각 할 때 부모 함수 내부 변수의 값 을 함부로 바 꾸 지 않도록 조심해 야 합 니 다.