이 변수가 JavaScript 범위를 벗어나는 이유는 무엇입니까?

Question

function foo(){ 
    var bar = 0; 
    $("#dummy").click(function(){ 
      bar += 1; 
    }) 
} 

막대가 함수 foo 안에 있다고 생각했기 때문에 항상 호출 가능합니다. 그러나 오류 메시지는 변수 막대가 정의되지 않았 음을 의미합니다. 왜 그 이유를 설명 할 수 있습니까?

Answer 1

범위를 벗어나지 않았습니다. 함수 내에서 클릭 핸들러를 정의하고 있으므로 아무 일도 일어나지 않도록 함수를 호출해야하지만, 게시 된 코드는 그 오류를 가져 오는 이유를 알 수 없습니다.

여기 예입니다 (필자는 jQuery를 제거) :

<button>Add one</button> 
<div>bar is: <span id="barCount">0<div></div> 

function foo(){ 
    var bar = 0; 
    document.querySelector("button").onclick = function(){ 
    bar += 1; 
    document.querySelector("#barCount").innerHTML = bar; 
    }; 
} 

foo(); 

Fiddle