자바스크립트 클로저 및 범위 체인 예제
-
21-12-2019 - |
문제
누군가 이 코드가 왜 그렇게 작동하는지 (명확하고 간결하게) 설명해 줄 수 있나요?저는 클로저가 존재하지 않고 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과 인터페이스하도록 작성될 때 클로저가 강력한 이유를 알고 싶습니다.
브라우저/돔과 인터페이스할 때 클로저 기술을 어떻게 적용할 수 있는지에 대한 훌륭하고 실용적인 예가 있는 사람이 있습니까?
감사해요.
해결책
당신이 가지고 있는 예에서는 매우 간단합니다.
첫 번째 예에는 변수가 하나만 있습니다. 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(); });