Как работает этот синтаксис JavaScript / jQuery: (функция (окно, неопределенное) {}) (окно)?

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

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Я прочитал статью о пространстве имен JavaScript и еще одну статью под названием « Важная пара паренов », поэтому я кое-что знаю о том, что здесь происходит.

Но я никогда не видел этот синтаксис раньше. Что это undefinedделает там? И почему windowнужно пройти, а потом снова появиться в конце?

Undefined является нормальной переменной и может быть изменен просто с помощью undefined = "new value";. Таким образом, jQuery создает локальную «неопределенную» переменную, которая ДЕЙСТВИТЕЛЬНО не определена.

Переменная окна сделана локальной из соображений производительности. Потому что, когда JavaScript ищет переменную, он сначала просматривает локальные переменные, пока не найдет имя переменной. Когда он не найден, JavaScript проходит через следующую область и т. Д., Пока не отфильтрует глобальные переменные. Так что, если переменная окна сделана локальной, JavaScript сможет быстрее ее найти. Дополнительная информация: ускорение JavaScript - Николас С. Закас

Неопределенный

Объявление undefinedв качестве аргумента, но никогда не передача ему значения гарантирует, что оно всегда неопределено, поскольку это просто переменная в глобальной области видимости, которую можно перезаписать. Это делает a === undefinedбезопасную альтернативу typeof a == 'undefined', которая сохраняет несколько символов. Это также делает код более удобным для минификаторов, что undefinedможно сократить, uнапример, сохранив еще несколько символов.

Окно

Передача windowв качестве аргумента сохраняет копию в локальной области, что влияет на производительность: http://jsperf.com/short-scope . Все доступы windowтеперь должны проходить на один уровень меньше по цепочке областей действия. Как и в случае undefined, локальная копия снова позволяет более агрессивно минимизировать.

Примечание:

Хотя это, возможно, и не было целью разработчиков jQuery, передача windowпозволяет легче интегрировать библиотеку в серверные среды Javascript, например, node.js, где нет глобального windowобъекта. В такой ситуации необходимо изменить только одну строку, чтобы заменить windowобъект другой. В случае jQuery, фиктивный windowобъект может быть создан и передан с целью очистки HTML (библиотека, такая как jsdom, может сделать это).

Другие объяснили undefined. undefinedэто как глобальная переменная, которая может быть переопределена на любое значение. Этот метод заключается в предотвращении взлома всех неопределенных проверок, если кто-то что-то написал undefined = 10. Аргумент, который никогда не передается, гарантированно будет действительным undefinedнезависимо от значения переменной undefined .

Причина прохождения окна может быть проиллюстрирована на следующем примере.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

Что записывает консоль? Значение windowобъекта верно? Неправильно! 10? Неправильно! Это логи undefined. Интерпретатор Javascript (или JIT-компилятор) переписывает его таким образом -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

Однако, если вы получите windowпеременную в качестве аргумента, нет переменной var и, следовательно, никаких сюрпризов.

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

windowпередается таким образом на тот случай, если кто-то решит переопределить объект окна в IE, я предполагаю то же самое для undefinedслучая, если он будет переназначен каким-то образом позже.

Верхняя часть windowэтого скрипта просто называет аргумент «окно», более локальный аргумент, чем глобальная windowссылка, и то, что будет использовать код внутри этого замыкания. В windowконце фактически указывается, что передать первому аргументу, в данном случае текущее значение window... надеюсь, вы не облажались до windowтого, как это произойдет.

Об этом может быть проще подумать, показывая наиболее типичный случай, используемый в jQuery, .noConflict()обработку плагинов , поэтому для большей части кода вы все еще можете использовать $, даже если это означает что-то иное, чем jQueryза пределами этой области:

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Протестировано с 1000000 итераций. Этот вид локализации не повлиял на производительность. Ни одной миллисекунды за 1000000 итераций. Это просто бесполезно.