По какой причине внутри jQuery блока не обновляется значение переменной?

Question

[Никита Савиных]

Доброго времени суток.

Столкнулся с непонятным поведением jQuery.
Есть некоторая переменная, которая объявлена, но не проинициализирована в момент объявления.
Далее следует jQuery код, внутри которого с этой переменной происходят различные преобразования.
Однако, вне блока jQuery, эти изменения странным образом теряются.

Код:

function galleryHelper(){
	self.galleryID="works-gallery";
	this.self = this;
	self.rowClass = "line-works-gallery";
	this.createRow = function(){
		var row;                                     // Момент инициализации
		jQuery(function($){
			row = $(document.createElement('div')); // Что-то с этой переменной делаем
			row.addClass(self.rowClass);
			$(row).appendTo("#"+galleryID); 
			row = $(row).get(0);
		});
console.log(row); // undefined
		return row;
	}
}

Я пробовал различные варианты:

function galleryHelper(){
	self.galleryID="works-gallery";
	this.self = this;
	self.rowClass = "line-works-gallery";
	this.createRow = function(){
		var row = jQuery(function($){
			row = $(document.createElement('div'));
			row.addClass(self.rowClass);
			$(row).appendTo("#"+galleryID); 
			row = $(row).get(0);
		});
console.log(row); // document
		return row;
	}
}

И такое тоже находил на SO:

function galleryHelper(){
	self.galleryID="works-gallery";
	this.self = this;
	self.rowClass = "line-works-gallery";
	this.createRow = function(){
		var row;                                     // Момент инициализации
		jQuery(function($){
			row = $(document.createElement('div')); // Что-то с этой переменной делаем
			row.addClass(self.rowClass);
			$(row).appendTo("#"+galleryID); 
			row = $(row).html();
		});
console.log(row); // undefined
		return row;
	}
}

Однако, чтобы ни происходило с row внутри jQuery блока - несмотря на то, что объявлена переменная во внешней области видимости (по отношению к jQuery блоку), эти изменения с ней не происходят.

Я понимаю, что, скорее всего, есть некоторый хитрый и интересный механизм, на основе которого либо работает jQuery, либо он этот механизм и реализует в самом себе.

Очень хотелось бы разобраться в таком загадочном поведении, заранее благодарю за ваши ответы.

Comments

[Moses Fender]

Ну почему в console.log(row) undefined ясно невооружённым взглядом - row заявлена просто.
Мне интересно, каким непостижимым образом ты что-то делаешь внутри этой фигни - jQuery(function($){…});
Откуда ты в неё заходишь?

[Никита Савиных]

Moses Fender, api.jquery.com/jquery
Если промотать в самый конец :

jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});

[Moses Fender]

Никита Савиных, И?.. Где вызов этой функции? я бы понял, кабы было написано с запуском:

(function($){
…
    })(jQuery);

Answer 1

[Robur]

Никита Савиных, все что внутри

jQuery(function($){
    // Внутри вложенного блока что-то делаем с этой переменной
  }

выполнится когда-то в будущем, когда страница загрузится.
у вас сначала переменная объявляется, потом выводится в консоль (undefined) потом через какое-то время страница загружается и вызывается тот код где вы что-то с ним делаете.
поставьте console.log в jquery () и увидите порядок, а так же прочитайте https://api.jquery.com/ready/

Comments

[Никита Савиных]

Благодарю, это, кажется, действительно то, что нужно.
В итоге сделал примерно так:

jQuery(function($){
  function galleryHelper(){
    // Все содержимое что и ранее, за исключением того, что вырезан jQuery блок
  }
});

Answer 2

[dollar]

А при чём здесь jQuery? Переменная объявлена локально, то есть внутри функции, а значит будет уничтожена по её завершении.

function func() {
  var row;
  row = 123;
}
func();
console.log(row); // undefined

https://learn.javascript.ru/closures

Comments

[Никита Савиных]

Мне сильно кажется, что наши примеры отличаются.

[Никита Савиных]

Дело в том, что запрашивается состояние переменной внутри функции, в которой и была создана.
Попробую так это описать:

var functionObject = function(){

  var variable;  // Объявление внутри функции
  jQuery(function($){
    // Внутри вложенного блока что-то делаем с этой переменной
  }
  console.log(variable); // Запрашиваем состояние переменной на том же уровне видимости, на котором объявляли её

}

[dollar]

Никита Савиных, хм, тогда у вас где-то ошибка в коде и переменная не инициализируется. Попробуйте так:

row = $(document.createElement('div'));
console.log("row initialized!");

И для пущей надёжности:

row = $(row).html();
console.log('Just for sure:', row);

[Никита Савиных]

dollar, проводил такую проверку, смотрел дебаггером хрома - самое забавное, что внутри этого jQuery блока значение обновляется, а по выходу - сбрасывается на undefined.
Однако тут еще следует уточнить вот какой момент:

function galleryHelper(){
  self.galleryID="works-gallery";
  this.self = this;
  self.rowClass = "line-works-gallery";
  this.createRow = function(){
    var row = "initState";                                     // Проинициализируем начальным значением initState
    jQuery(function($){
      row = $(document.createElement('div')); // Что-то с этой переменной делаем
      row.addClass(self.rowClass);
      $(row).appendTo("#"+galleryID); 
      row = $(row).html();
    });
console.log(row); // > initState
    return row;
  }
}

[Никита Савиных]

dollar, Касательно вашего второго примера - внутри jQuery блока действительно будет ожидаемый вывод, но по выходу значение будет изменено таким образом, как будто вообще jQuery код не выполнялся.

[dollar]

Тогда вместо
console.log(row);
Проверьте это
setTimeout(()=>console.log("row=",row), 5000);
Это намёк на то, что происходит, если уж код внутри jQuery выполняется.

Хотя если вы делали

row = $(row).html();
console.log('Just for sure:', row);

то должны были заметить, что сначала выводится undefined, а потом информация о row, то есть увидеть порядок выполнения.