[전단 면접 시리즈] JS 의 클 로즈 백. - 경위.

머리말
면접 을 본 전단 인 들 이 더 많이 묻 는 화 제 는 js 의 폐쇄 일 수도 있 습 니 다. 마치 수 능 에서 어 려 운 문 제 를 내 서 다른 사람의 차 이 를 벌 려 야 하 는 것 같 습 니 다. 폐쇄 는 바로 이 렇 습 니 다. 평소에 많이 쓰 지 않 더 라 도 그 특수성 때문에 전단 인의 js 가 상황 을 파악 하고 있 습 니 다.예전 에 도 많은 자료, 책 을 계속 보 았 고 그 에 대한 해석 은 5 야드 8 문 이 었 다. 큰 차이 가 나 지 않 았 지만 자신의 몇 가지 핵심 문제 (예 를 들 어 왜 closure 라 고 하 는 지, 도대체 장면 을 사용 하 는 지) 에 대답 하지 못 했 기 때문에 깊이 이해 하지 못 했 고 유연 하 게 사용 하 는 것 도 말 할 필요 도 없 었 다.최근 자 료 를 찾 아 보 니 w3 school 에서 그 에 대한 소개 가 매우 깊 고 번역 되 어 여러분 에 게 계발 과 도움 이 되 기 를 바 랍 니 다.
자원 주소:https://www.w3schools.com/js/js_function_closures.asp
w3 school 원인 불명 벽, 순수 기술 사이트
js 의 변 수 는 local 또는 전역 global 에 속 할 수 있 습 니 다.global 변 수 는 closure 패 킷 기술 을 이용 하여 local 로 컬 로 변 할 수 있 습 니 다.
전역 변수
한 함수 가 함수 내부 의 모든 변 수 를 가 져 올 수 있 습 니 다. 아래 처럼 (쓸데없는 소리 같 습 니 다)

Example
function myFunction() {
    var a = 4;
    return a * a;
}

그러나 함 수 는 외부 에서 정 의 된 변 수 를 가 져 올 수 있 습 니 다 (js 특색).

Example
var a = 4;
function myFunction() {
    return a * a;
}

이전 예 에서 a 는 전체적인 변수 입 니 다.웹 페이지 에서 전역 변 수 는 window 대상 에 속 합 니 다.물론 전역 변 수 는 페이지 의 모든 스 크 립 트 에서 사용 되 고 수정 할 수 있 습 니 다.첫 번 째 예 에서 a 는 부분 변수 이다.하나의 부분 변 수 는 함수 가 정의 하 는 곳 에 만 사용 할 수 있 고 다른 함수 와 스 크 립 트 는 격 리 됩 니 다.
전역 변수 와 국부 변 수 는 이름 이 같 더 라 도 서로 다른 변 수 를 가지 고 그 중 하 나 를 바 꾸 고 다른 하 나 는 영향 을 받 지 않 습 니 다.
변 수 를 만 들 때 키워드 var 가 없 으 면 전체 변수 입 니 다. 함수 내부 에서 정의 하 더 라 도.
변수의 생명주기
전역 변수 가 살아 남 는 시간 은 응용 (window 또는 웹 페이지 일 수 있 음) 이 존재 하 는 시간 입 니 다.국부 변수의 생명 은 더욱 짧 아 집 니 다. 환술 이 호출 될 때 만 들 고 함수 가 끝 날 때 삭 제 됩 니 다.
A Counter Dilemma (계수기 의 역설)
번역 이 좋 지 않 은 것 은 사실 역설 이 아니다. 더 정확히 말 하면 딜레마 이다. 이 계산 기 를 처리 할 좋 은 방법 이 없다. 물론 뒤 에는 폐쇄 를 통 해 이 루어 져 야 한다.
어떤 변 수 를 통 해 무언 가 를 통계 하고 싶다 고 가정 하고 모든 함수 가 이 를 사용 할 수 있 기 를 바 랍 니 다.당신 은 당연히 전역 변수 와 함 수 를 사용 하여 위의 수 요 를 실현 할 수 있 습 니 다.

Example
// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
    counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The counter should now be 3

위의 방안 에 문제 가 존재 합 니 다. 페이지 의 코드 는 이 전역 변 수 를 직접 수정 할 수 있 고 add 를 호출 할 필요 가 없습니다. (우리 가 원 하 는 것 은 conter 는 add 의 개인 변수 로 만 처리 하 는 것 입 니 다)

Example
// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
    var counter; 
    counter += 1;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 0

부분 적 인 conter 가 아 닌 전역 변수의 conter 를 표시 하기 때문에 전혀 도움 이 되 지 않 습 니 다.전역 변 수 를 삭제 하고 국부 적 인 counter 에 만 접근 할 수 있 도록 함 수 를 되 돌려 줍 니 다.

Example
// Function to increment counter
function add() {
    var counter; 
    counter += 1;
    return counter;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 1.

여전히 효과 가 없습니다. 왜냐하면 우 리 는 함 수 를 호출 할 때마다 국부 변수 counter 를 리 셋 했 기 때 문 입 니 다.그리고 js 의 내부 함수 하나 로 이 문 제 를 해결 할 수 있다.
JS 내장 함수
모든 함수 가 전역 의 역할 영역 에 접근 할 수 있 습 니 다.사실 js 에 서 는 모든 함수 가 부모 필드 의 변 수 를 방문 할 수 있 습 니 다.JS 는 내장 함 수 를 지원 합 니 다. 내장 함 수 는 부모 영역 에 접근 할 수 있 습 니 다.아래 의 예 에서 내부 함수 플러스 () 는 부모 함수 에서 conter 변 수 를 방문 할 수 있 습 니 다.

Example
function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

이것 은 counter 의 딜레마 를 해결 할 수 있 습 니 다. 외부 에서 플러스 함 수 를 얻 을 수 있다 면.우 리 는 counter = 0 을 한 번 만 실행 하도록 해 야 한다.그래서 클 로 저, 클 로 저 가 필요 합 니 다.
JS 폐쇄
자동 호출 함 수 를 기억 하 십 니까? 아래 함 수 를 보십시오.

Example
var add = (function () {
    var counter = 0;
    return function () {counter += 1; return counter}
})();

add();
add();
add();

// the counter is now 3

변수 add 는 함 수 를 되 돌려 주 는 자동 호출 함 수 를 설정 합 니 다.자가 호출 함수 가 마침 한 번 만 실행 되 어 counter 의 초기 화 를 실현 하 였 다.이것 은 바로 js 의 패 킷 입 니 다. 함수 가 자신의 개인 변 수 를 가지 게 할 수 있 습 니 다.counter 의 역할 영역 은 익명 함수 에 제한 되 어 있 으 며, add 함수 로 만 변경 할 수 있 습 니 다.그 러 니까 패 킷 을 닫 는 것 은 부모 도 메 인 을 가 져 올 수 있 는 함수 입 니 다. 부모 함수 가 꺼 져 있어 도.