JavaScript 루프에서 이벤트 핸들러를 생성할 때 클로저가 공유 참조를 방지하는 데 어떻게 도움이 될 수 있습니까?

Javascript에서 클로저를 사용하여 이벤트 핸들러 생성

Javascript 프로그래밍에서는 루프 내에 이벤트 핸들러를 생성하는 것이 일반적입니다. 그러나 select.onchange = function()과 같은 구문을 사용할 때는 공유 참조에 발생할 수 있는 문제를 인식하는 것이 중요합니다.

이 구문을 사용하여 루프 내에서 이벤트 핸들러를 할당하면 다음과 같은 문제가 발생할 수 있습니다. 루프 내에 할당된 최종 값을 포함하는 동일한 변수를 가리키는 모든 이벤트 핸들러에 적용됩니다. 이로 인해 개별 반복에 관계없이 모든 이벤트에 대해 동일한 매개변수가 이벤트 핸들러에 전달될 수 있습니다.

이 문제를 해결하고 공유 변수 참조를 방지하려면 클로저가 필요합니다. 클로저에는 참조를 통해 외부 함수의 변수를 캡처하는 내부 함수를 만드는 작업이 포함됩니다. 그런 다음 이 내부 함수를 이벤트 핸들러로 사용할 수 있으며, 각 이벤트 핸들러가 해당 루프 반복의 변수에 대한 자체 복사본을 갖도록 보장합니다.

질문에 제공된 예에 대해 아래 코드는 다음을 수행하는 방법을 보여줍니다. 클로저를 구현하고 올바른 매개변수를 이벤트 핸들러에 전달합니다.

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a) {
        return function() {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}</code>

이 코드에서 내부 익명 함수는 이벤트 핸들러로 사용되는 함수를 반환합니다. 함수 내의 (s,c,a) 매개변수는 참조로 캡처되므로 각 이벤트 핸들러에 고유한 변수 세트가 있습니다. 결과적으로 이벤트가 발생할 때 올바른 매개변수가 onStatusChanged 메소드에 전달됩니다.

위 내용은 JavaScript 루프에서 이벤트 핸들러를 생성할 때 클로저가 공유 참조를 방지하는 데 어떻게 도움이 될 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!