자바스크립트 클로저 및 범위 체인 예제

Question

누군가 이 코드가 왜 그렇게 작동하는지 (명확하고 간결하게) 설명해 줄 수 있나요?저는 클로저가 존재하지 않고 javascript에서 수행하는 방식으로 작동하지 않는 Java(6 및 7)의 강력한 형식의 배경에서 왔습니다.이 질문과 관련된 개념은 다음과 같습니다.클로저와 범위 체인.

예는 다음과 같습니다.

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = function() { console.log(i); }
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });

위의 예는 9(10회)를 기록하지만 기대와 내 직관은 0-9를 기록할 것이라고 생각했습니다.

이것이 Javascript에서 작동하는 방식으로 작동하는 이유는 무엇입니까?클로저는 매우 강력하지만 개념을 한 번에 확실히 파악하려고 노력하고 있습니다!약간 수정된 예는 올바른 출력을 생성합니다. 그런데 그 이유는 무엇입니까?

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = (function(index) { console.log(index); })(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); }); 

클로저는 Javascript에 고유한 것이 아니지만 Javascript가 실제로 브라우저/dom과 인터페이스하도록 작성될 때 클로저가 강력한 이유를 알고 싶습니다.

브라우저/돔과 인터페이스할 때 클로저 기술을 어떻게 적용할 수 있는지에 대한 훌륭하고 실용적인 예가 있는 사람이 있습니까?

감사해요.

Answer 1

당신이 가지고 있는 예에서는 매우 간단합니다.

첫 번째 예에는 변수가 하나만 있습니다. i 모든 것이 해당 단일 값을 참조합니다.그래서..그것은 숫자를 인쇄합니다 9 열 번.각 기능은 공유됨 가치 i 그것은 변화한다.

두 번째 예에서는 클로저를 사용하고 있습니다.각 함수에는 다음과 같은 개인 변수가 있습니다. index 이는 -- 여기서 중요한 부분은 -- 복사 가치의 i.

그래서 당신은 얻습니다 0 ~을 통해 9 왜냐하면 10개의 함수가 있고 각 함수에는 개인 정보가 있기 때문입니다. index 변수와 그 각각 index 변수는 스냅샷을 얻습니다. i 당시 존재했던 것처럼.

더 긴 형태의 폐쇄가 도움이 될 수 있습니다.

function myFactory(index) {
  return function() {
    console.log(index);
  }
}

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = myFactory(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });