루프의 클로저는 어떻게 변수 공유를 처리하고 고유성을 유지합니까?

루프의 클로저에 대한 오해 폭로

프로그래밍 영역에서 클로저는 범위 내에서도 변수에 대한 참조를 유지할 수 있는 능력으로 인해 상당한 주목을 받아 왔습니다. 루프의. 그러나 개념을 이해하는 것은 어려울 수 있습니다. 단순화된 코드 예제를 사용하여 자세한 설명을 살펴보고 포괄적인 이해를 제공하겠습니다.

다음 코드 조각을 고려하세요.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!