js 어 쩔 수 없 이 -- 폐쇄 와 역할 영역 에 대하 여

최근 에 js 고급 프로그램 을 보 았 습 니 다. 책 에서 폐쇄 에 대한 설명 은 '폐쇄 는 다른 함수 역할 영역 에 접근 할 권리 가 있 는 변 수 를 말 합 니 다' 입 니 다. 저 는 너무 추상 적 이 라 고 생각 합 니 다. 한 번 의 조회 와 고생 을 통 해 제 이 해 를 이야기 하고 여러분 에 게 도움 이 되 기 를 바 랍 니 다.

폐쇄 에 대해 이야기 하기 전에 역할 영역 ① 역할 영역 에 대해 이야기 하 는 것 이 좋 습 니 다. 앞의 글 에서 이미 언급 한 바 와 같이 역할 영역 은 쉽게 말 하면 특정한 변수 가 (역할 을 하 는) 역할 을 하 는 범위 입 니 다.그것 의 규칙 은 내층 의 작용 역 이 외층 의 작용 역 에 접근 할 수 있 지만 반대로 는 안 된다 는 것 이다

     function foo(){
        var b = "10";
    }
     console.log(b);//  ,b is not defined

위의 demo 에서 전 체 는 변수 b 에 접근 할 수 없고 외부 에 서 는 내부 변 수 를 방문 할 수 없습니다. ② 역할 도 메 인 체인 검색 원칙: 역할 도 메 인 에서 특정한 변 수 를 방문 (읽 기 | 설정) 하면 현재 역할 도 메 인 에서 검색 하고 찾 으 면 직접 사용 합 니 다.만약 에 찾 지 못 하면 상급 역할 영역 에서 계속 검색 하고 찾 으 면 사용 하 며 찾 지 못 하면 위의 과정 을 0 급 역할 영역 체인 까지 반복 합 니 다.

    var num = 10;
    function f1(){
        console.log(num);       //undefined         ,     10
        num = 66;
        console.log(num);               // 66
        function f2(){
            var num = 99;
            console.log(num);           // 99
        }
        var num = 1000;
        f2();
        console.log(num);            //1000
    }
    f1();
    console.log(num);               //10         

역할 역 의 개념 을 이해 한 후에 책 에 있 는 폐쇄 적 인 해석 에 대해 여러분 도 어느 정도 이해 하 셨 을 것 이 라 고 믿 습 니 다. 외부 역할 역 이 내부 역할 역 의 변 수 를 방문 할 수 없 으 니 우리 가 방문 해 야 한다 면 이 문 제 를 어떻게 해결 해 야 합 니까?그래서 가방 을 닫 고 탄생 했다.

저 는 패 킷 을 닫 는 것 에 대한 이 해 를 가지 고 있 습 니 다. 바로 폐쇄 공간 에서 개인 데 이 터 를 간접 적 으로 방문 할 수 있 는 방법 입 니 다. 외부 역할 도 메 인 이 내부 역할 도 메 인 변 수 를 방문 하 는 방법 으로 이해 할 수 있 습 니 다. 그러면 이 방법 은 어떻게 실현 되 었 습 니까?폐쇄 라 는 두 글 자 는 단순히 말 하면 폐쇄 라 는 뜻 이 고 가방 은 소포, 포장 을 말한다.자 바스 크 립 트 에는 블록 급 역할 영역 이 없습니다. 함 수 는 유일 하 게 역할 영역 을 만 들 수 있 는 대상 입 니 다. 역할 영역 을 닫 으 려 면 함수 로 닫 아야 합 니 다.

function f1(){
     var num = 10;
     return function(){
         console.log(num);
     };
}
var f2=f1();
f2();// 10

위의 사례 는 전형 적 인 패 킷 입 니 다. 외부 역할 도 메 인 은 함수 내부 의 변수 num 을 방 문 했 습 니 다. 그러면 이것 은 어떻게 하 는 것 입 니까?코드 에서 우 리 는 f1 함수 에서 함수 f2 를 리 턴 했 습 니 다. 우 리 는 f1 함수 의 결 과 는 f2 함수 입 니 다. f2 함수 가 호출 될 때 먼저 실행 환경 과 해당 하 는 역할 도 메 인 체인 을 만 듭 니 다. 함수 실행 에서 변수의 값 을 읽 고 쓰기 위해 서 는 도 메 인 체인 에서 변 수 를 찾 아야 합 니 다. f2 함수 에 대해 f1 은 외부 역할 도 메 인 입 니 다.그래서 자 연 스 럽 게 f1 의 변수 num 에 접근 할 수 있 습 니 다. 자신 도 모 르 게 전체 역할 도 메 인 은 f1 의 변수 num 의 값 에 접근 합 니 다.

패키지 와 for 순환 에서 다음 과 같은 사례 가 있다.

for (var i = 1; i <= 5; i++) {
    setTimeout( function timer(){
        console.log(i);
    },i*1000);
}

코드 의 실행 결과: 1 초 에 한 번 출력 하고 다섯 번 출력 합 니 다. 6. setTimeout 은 하나의 함수 가 들 어 왔 습 니 다. 일정 시간 지연 되 어 이 함 수 를 대기 열 에 추가 합 니 다. 일정 시간 지연 된 후에 함 수 를 실행 하 는 것 이 아 닙 니 다. 이 함 수 는 모든 다른 함수 가 실 행 된 후에 야 실 행 됩 니 다. 그 전에 for 순환 이 이미 실행 되 었 습 니 다.그래서 매번 인쇄 하 는 값 은 for 순환 의 최종 i 값 6 이 고 1 초 에 한 번 씩 출력 합 니 다.여기 서 타이머 안의 함 수 는 그 역할 영역 범위 의 값 (i 의 값) 을 가 져 올 수 없습니다. 근본 적 인 원인 은 타이머 가 비동기 이벤트 이기 때 문 입 니 다. 이 문 제 를 해결 하려 면 함수 에 즉시 실행 함수 () 를 추가 하 였 습 니 다.매번 순환 할 때마다 타이머 함수 가 즉시 실행 되 고 i 의 인쇄 값 을 가 져 옵 니 다.

for (var i = 1; i <= 5; i++) {
       setTimeout(( function timer(){
           console.log(i);//1,2,3,4,5
       })(),i*1000);
   }

물론 Es6 에서 let 설명 변 수 를 사용 하여 블록 급 역할 영역 도 똑 같은 역할 을 했 음 을 밝 혔 습 니 다. 여기 서 저 는 깊이 이해 하지 못 했 고 해석 하지 않 았 습 니 다.

for (let i = 1; i <= 5; i++) {
    setTimeout( function timer(){
        console.log(i);//1,2,3,4,5
    },i*1000);
}

자, 이렇게 쓰 겠 습 니 다. 여러분 이 보시 면 얻 을 수 있 습 니 다. 부족 한 점도 지적 해 주 십시오. O (∩ ∩) O 감사합니다!