JS에서 for 루프 폐쇄 문제를 해결하는 방법

이 글에서는 JS의 for 루프 폐쇄 문제를 해결하는 두 가지 방법을 공유하겠습니다. 도움이 되기를 바랍니다.

이런 코드 스니펫을 사용하면 초보자는 Li를 순서대로 클릭하면 해당하는 0, 1, 2, 3, 4, 5가 팝업되는 것을 당연하게 여기겠지만 실제 결과는 이렇습니다

어떤 버튼을 클릭하든 마지막으로 나타나는 것은 6입니다. 이것은 전형적인 for 루프 폐쇄 문제입니다.

먼저 클로저가 무엇인지 이해해 봅시다. Baidu Encyclopedia에서는 이를 다음과 같이 설명합니다. 클로저는 자유(특정 개체에 바인딩되지 않음) 변수를 포함할 수 있는 코드 블록입니다. 전역 컨텍스트에서 정의되지만 코드 블록이 정의된 환경(지역 변수)에서 정의됩니다. "클로저"라는 단어는 실행될 코드 블록(자유 변수가 블록 내에 포함되어 있기 때문에 이러한 자유 변수와 이들이 참조하는 객체는 해제되지 않음)과 자유 변수에 대해 제공되는 바인딩의 조합에서 유래합니다. 컴퓨팅 환경(범위). 다양한 수준의 클로저 지원은 Scala, Scheme, Common Lisp, Smalltalk, Groovy, JavaScript, Ruby, Python, Lua, object c 및 Java(Java8 이상)와 같은 언어에서 찾을 수 있습니다.

제가 이해한 바는 다음과 같습니다. 함수는 다른 함수 내에 중첩되어 있으며 내부의 한 함수는 외부 함수의 변수에 액세스해야 하므로 클로저는 값에 대해 존재하는 특정 지역 변수를 유지하는 것입니다.

그러나 위의 예와 같이 JavaScript에는 몇 가지 일반적인 클로저 문제가 있으므로 이러한 문제를 해결하는 방법을 살펴보겠습니다.

해결책 1: 클로저 레이어를 추가하면 i가 함수 매개변수의 형태로 내부 함수에 전달됩니다.

결과적으로 해당 li를 클릭하면 해당 숫자가 표시됩니다. 세 번째 li를 클릭하면 다음이 나타납니다. 효과:

해결 방법 2: i 값을 저장할 속성을 찾은 다음 값을 팝업합니다.

세 번째 li를 클릭하면 다음 효과가 나타납니다. :

관련 추천:

JavaScript for 루프 if 판단문 상세 설명

for-in 루프 및 for 루프 순회 배열 사용법

JavaScript에서 for 루프 사용 시 주의 사항

위 내용은 JS에서 for 루프 폐쇄 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!