Объявление переменных javascript

Question

В чем разница между двумя следующими способами объявления переменных javascript?

Version 1

var shadowBox = $(this); 
var startInfo = shadowBox.children('.start-info'); 
var originalHeight = startInfo.height(); 

Version 2

var shadowBox = $(this), 
    startInfo = shadowBox.children('.start-info'), 
    originalHeight = startInfo.height(); 

Я только спрашиваю, потому что я использовал второй вариант в JQuery плагин:

(function ($) { 
    $.fn.setUpShadowBox = function (options) { 
     options = $.extend({ 
      boxSpeed: 750, 
      boxWidth: 998, 
      boxPosition: -40, 
      heightSpeed: 500, 
      scrollSpeed: 750 
     }, options); 

     return $(this).each(function() { 
      var shadowBox = $(this), 
       startInfo = shadowBox.children('.start-info'), 
       originalHeight = startInfo.height(); 

      //rest of plugin code 
     }); 
    }; 
}); 

но когда Я использовал он на селекторе классов, поэтому ему пришлось перебирать несколько раз, обрабатывать переменные, как если бы они были глобальными, и использовать только последний установленный originalHeight. Как только я изменил это на первую версию объявления переменных, мой плагин работал так, как ожидалось, и переменные оставались в пределах их объема.

Почему это?

Answer 1

Вы пропустили запятую на первой строке?

Если вы сделаете это:

var shadowBox = $(this) 
    startInfo = innerContainer.children('.start-info'); 

Вместо этого:

var shadowBox = $(this), 
    startInfo = innerContainer.children('.start-info'); 

startInfo станет глобальной переменной.

Попробуйте разместить их на одной линии и посмотреть, что произойдет.

Answer 2

Пожалуйста, взгляните на Declaring javascript variables, это будет действительно полезно. Ваша проблема: var shadowBox = $(this), вам не хватает запятой.