내부 JavaScript 함수에 외부 객체 포함

Question

이 문제와 관련된 것으로 보이는 몇 가지 질문을 발견했지만 내 이해의 범위 내에서 광산이 다르므로 여기에 있습니다. 내가 크게 내 코드를 단순화, 심지어 주석과 한 줄을 교체하지만, 개념은 동일이 ... 위젯 나는 새로운 객체를 생성하고 이벤트를 추가하고 각각에 대한 그래서

function myFunction(options) { 
    var button; 
    options.widgets.forEach(function (w) { 
     button = document.createElement("button"); 
     //add button to the DOM 
     aListOnMyPage.addEventListener("selectionchanged", function (args) { 
      var a = button; 
     }); 
    }); 
} 

Listener를 내가 작성한 DOM 요소 (버튼)를 참조해야하는 페이지의 목록에 추가합니다. 내가 보는 동작은 이벤트 수신기를 만들 때 버튼이 올바르게 설정되지만, 수신기의 이벤트가 발생하면 버튼은 항상 내가 마지막으로 만든 버튼에 대한 참조입니다. 아마도 늦은 것 같아요.하지만 이런 식으로 행동 할 이유가 내 머리를 감쌀 수는 없어요. 아무도 나를 위해 이것을 명확히 할 수 있습니까?

Answer 1

물론 가능합니다.

여기의 문제는 실제로 범위입니다. 작성한 코드를 살펴 보겠습니다.

function myFunction(options) { 
    var button; 
    options.widgets.forEach(function (w) { 
     button = document.createElement("button"); // UH-OH... 
     //add button to the DOM 
     aListOnMyPage.addEventListener("selectionchanged", function (args) { 
      var a = button; 
     }); 
    }); 
} 

알려 주실 수 있습니까? button은 document.createElement("button")과 같아야한다고 선언했지만 var 키워드를 사용하지 않으므로 여러 개의 로컬 변수 대신 하나의 전역 변수가 선언되었습니다. 즉, 루프가 실행될 때마다 하나의 전역 변수가 리스너에 의해 참조되고있어 문제가 발생합니다.

당신과 같이 여기에 로컬 변수를 사용하십시오 :

function myFunction(options) { 
    options.widgets.forEach(function (w) { 
     var button = document.createElement("button"); 
     //add button to the DOM 
     aListOnMyPage.addEventListener("selectionchanged", function (args) { 
      var a = button; 
     }); 
    }); 
} 

이 크게 상황을 개선해야한다. 적어도 당신이 한 걸음 더 나아갈 수 있기를 바랍니다. 행운을 빌어 요.

Answer 2

나는 클로저 때문에이 문제에 직면 해 있다고 생각한다. 여러분이 사용하는 버튼 변수는 모두 myFunction이다. 모든 변경 사항은 참조 변경 사항이므로 익명 함수 내부의 변수 선언을 변경하면이 문제를 해결할 수 있다고 생각한다. 문제.

function myFunction(options) { 
    //var button; 
    options.widgets.forEach(function (w) { 
     var button = document.createElement("button"); 
     //add button to the DOM 
     aListOnMyPage.addEventListener("selectionchanged", function (args) { 
      var a = button; 
     }); 
    }); 
} 

변경 별도 button 변수 forEach 익명의 기능을 제공한다.