Необъяснимое поведение при перемещении тегов скрипта в DOM?

Question

Я обнаружил странное поведение, пытаясь воспроизвести что-то еще, и я подумал, что это интересно.

Мой пример jsbin здесь

Код ядра:

  <div id="diag">
    <script type="text/javascript">
      $(document).ready(function(){
      if(x==undefined){
        var x=1;
      }else{
        x=x+1;
      }
      alert(x);
      });
    </script>
  </div>

(внизу страницы)

$(document).ready(function(){
  $('#diag').dialog();
});

$.dialog Я знаю, что этот сценарий будет перемещен в DOM, поэтому ожидается, что он будет выполнен дважды.Тем не менее, результаты отличаются от ожидаемых.

Я ожидал, что он скажет 1, а затем 2. Однако, он говорит 1, а затем 1 снова.Как это вообще возможно?Это поведение одинаково для Firefox5, Chrome и IE8

Answer 1

var x;
$(document).ready(function(){

    if(x==undefined)
        x=1;
    else
        x=x+1;

    alert(x);
});

Answer 2

Область действия переменной «x» является блоком для оператора if. Это означает, что x определено здесь:

var x=1;

А затем уничтожается и возвращается к неопределенному здесь:

}else{

Что вы хотите сделать, так это убедиться, что x определено в большем объеме.

<script type="text/javascript">
  var x = 1;
  $(document).ready(function(){
    if(x == undefined){
      x = 1;
    } else {
      x = x + 1;
    }
    alert(x);
  });
</script>

Answer 3

область действия x находится внутри этой функции, она переопределяется при втором вызове