Як працює цей синтаксис JavaScript / jQuery: (функція (вікно, не визначено) {}) (вікно)?

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

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Я прочитав статтю про розширення імен JavaScript і ще одну під назвою " Важлива пара батьків ", тому мені відомо про те, що відбувається тут.

Але я ніколи раніше не бачив цього конкретного синтаксису. Що це undefinedробиш там? І чому це windowпотрібно пройти, а потім знову з’явитися в кінці?

Невизначена нормальна змінна і її можна просто змінити undefined = "new value";. Таким чином, jQuery створює локальну змінну "undefined", яка дійсно не визначена.

Змінна вікна робиться локальною з міркувань продуктивності. Тому що, коли JavaScript шукає змінну, вона спочатку проходить локальні змінні, поки не знайде ім'я змінної. Якщо його не знайти, JavaScript проходить через наступну область застосування тощо, поки не фільтрує глобальні змінні. Отже, якщо змінна вікна зроблена локально, JavaScript може шукати її швидше. Додаткова інформація: Пришвидшити Ваш JavaScript - Ніколас Закас

Не визначено

Заявляючи undefinedяк аргумент, але ніколи не передаючи йому значення, це гарантує його завжди невизначеність, оскільки це просто змінна в глобальному масштабі, яку можна перезаписати. Це робить a === undefinedбезпечною альтернативою typeof a == 'undefined', яка економить кілька символів. Це також робить код більш зручним для мініфікаторів, як undefinedйого можна скоротити, uнаприклад, заощадивши ще кілька символів.

Вікно

Передача windowяк аргумент зберігає копію в локальному масштабі, що впливає на продуктивність: http://jsperf.com/short-scope . Усі доступні до windowтепер доведеться подорожувати на один рівень менше вгору по ланцюгу. Як і у випадку undefined, локальна копія знову дозволяє більш агресивне мінімізація.

Sidenote:

Хоча це, можливо, не було наміром розробників 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 ітерацій. Такий тип локалізації не впливав на продуктивність. Ні 100 мілісекунд у 1000000 ітерацій. Це просто марно.