프로그래밍 영역에서 클로저는 범위 내에서도 변수에 대한 참조를 유지할 수 있는 능력으로 인해 상당한 주목을 받아 왔습니다. 루프의. 그러나 개념을 이해하는 것은 어려울 수 있습니다. 단순화된 코드 예제를 사용하여 자세한 설명을 살펴보고 포괄적인 이해를 제공하겠습니다.
다음 코드 조각을 고려하세요.
<code class="javascript">function addLinks() { for (var i = 0, link; i < 5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function (num) { return function () { alert(num); }; }(i); document.body.appendChild(link); } } window.onload = addLinks;</code>
발생하는 질문은 이 코드를 어떻게 압축할 것인가입니다. 클로저의 본질을 유지하면서. 이 문제를 해결하기 위해 "함수 팩토리" 접근 방식을 사용합니다.
<code class="javascript">for (var i = 0; i < 10; i++) { document.getElementById(i).onclick = (function (x) { return function () { alert(x); } })(i); }</code>
또는 가독성을 높이기 위해:
<code class="javascript">function generateMyHandler(x) { return function () { alert(x); } } for (var i = 0; i < 10; i++) { document.getElementById(i).onclick = generateMyHandler(i); }</code>
클로저의 역할 공개:
이해해야 할 중요한 측면은 클로저의 고유한 특성입니다. 변수의 값을 포착할 뿐만 아니라 변수 자체도 포함합니다. 이를 설명하기 위해 다음 코드를 고려하십시오.
<code class="javascript">var message = 'Hello!'; document.getElementById('foo').onclick = function () { alert(message) }; message = 'Goodbye!';</code>
'foo' 요소를 클릭하면 "Goodbye!"라는 메시지를 표시하는 경고 상자가 트리거됩니다. 이는 클로저가 변수의 값뿐만 아니라 변수를 유지하기 때문입니다.
루프의 맥락에서 간단한 클로저를 사용하면 변수 공유가 발생합니다. 다음 코드는 이를 보여줍니다.
<code class="javascript">for (var i = 0; i < 10; i++) { document.getElementById('something' + i).onclick = function () { alert(i) }; }</code>
요소를 클릭하면 모든 함수가 동일한 변수를 공유하므로 숫자 10으로 경고 메시지가 표시됩니다. i = "hello"; 그러면 모든 요소에 "hello"라는 동일한 경고가 표시됩니다. 이는 변수에 대한 공유 참조 때문입니다.
함수 인수의 힘:
이 변수 공유를 완화하기 위해 JavaScript에서 함수 인수의 기능을 활용합니다. . 함수가 호출되면 인수는 참조(객체의 경우) 또는 값(문자열 및 숫자의 경우)으로 전달됩니다. 이를 통해 클로저 내에서 변수 공유를 중단할 수 있습니다.
수정된 코드 조각에서:
<code class="javascript">for (var i = 0; i < 10; i++) { document.getElementById(i).onclick = (function (x) { return function () { alert(x); } })(i) }</code>
원하는 함수 참조를 생성하는 팩토리 함수를 도입합니다. 이 참조는 함수에 전달된 인수(이 경우 i 값)를 캡처하고 이를 클로저 내에서 유지하여 각 요소가 고유한 값을 유지하도록 보장합니다.
위 내용은 루프의 클로저는 어떻게 변수 공유를 처리하고 고유성을 유지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!