澄清JavaScript的範圍

Question

在此代碼，我不明白爲什麼，如果我插入一個斷點第一如果成功if(data == 1){條件，我可以看到fromCTA變量，但不$form：

jQuery('.pane-tab form, form#hlp_contactCTA').on('click','.input-submit',function(e){ 
    var $form = jQuery(this).parent('form'); 
    var fromCTA = false; 
    var formArrSerialized = $form.serializeArray(); 
    var len = formArrSerialized.length; 
    for(var i=0; i<len; i++){ 
     if(formArrSerialized[i].name == 'message'){ 
      var msg = formArrSerialized[i].value; 
     }     
    } 
    if(msg){ 
     if(!$form.is('#msg-form')){ //we are in user account 
      fromCTA = true; 
      //formArrSerialized.push({name:'fromCTA', value: 1}); 
     } 
     formArrSerialized.push({name:'action', value:'send_message'}); 

     var param = jQuery.param(formArrSerialized); 
     jQuery.ajax({ 
      url:pathToAjax() + 'wp-admin/admin-ajax.php', 
      data:param, 
      type:'POST', 
      success: function(data){ 
       if(data == 1){ 
        if(!fromCTA){ 
         appendMsg(msg); 
        } else { 
         showMsg('Il messaggio è stato inviato',2000,function(){jQuery('#popup-contactCTA').hide();}); 
        }     
       } else { 
        console.log('qualcosa è andato storto'); 
       }; 
      }, 
      error: function(){ 
       console.log('error');    
      } 
     }); 
    } 

    e.preventDefault(); 
}); 

代碼工作正常有沒有錯誤，請分析一下才回答我的問題，這方面的變量範圍：
在匿名函數中的成功，我可以在Chrome調試器中看到的只是一個封閉的可變fromCTA和msg，而我期望看到$form， formArrSerialized和len。他們在我看來都具有相同的域

Answer 1

這只是調試器的工作方式。默認情況下，調試器僅向您顯示當前範圍中的變量。它不會在父範圍中顯示變量。

但是，如果您在父範圍內爲變量設置了一個觀察點，例如$form，您將能夠看到它的值。

所以，這只是調試器的工作方式，並且與代碼的實際工作方式或Javascript實際工作方式無關。這可能是因爲在全局範圍內可能有很多變量，並且如果這些變量都包含在範圍內的變量列表中，看起來更多的局部變量確實會變得複雜。

請記住，範圍是分層的。當您在層次結構的上一層查詢某些變量時，上面的範圍可能會有更多級別，然後它將最終到達全局範圍，其中將包含所有全局變量。所以，你所看到的實際上只是調試器中的UI選擇。